Are multiple init call required? about i18next HOT 7 CLOSED

You don't have to init i18n everytime. The init call is needed once to configure i18next - but can be called n-times to change configuration.

The most important thing is: Don't start the application before i18next has finished loading it's resources. The call is asynchronous so if you render something before i18next has loaded resources from server it won't translate like expected. You can change i18next to load resources synchronous (never the best option) or start your app after all needed components are initialized. (eg. https://github.com/jamuhl/i18next-webtranslate/blob/master/client/app/main.js line 81)

If you use JQuery you don't even need to pass i18n to the module as you can use $.t(key, options) to access translations or $(selector).i18n() as in your sample.

If you plan to create a bigger app i would suggest to use i18n inside your template rendering - sample for handlebars under: http://i18next.com/pages/doc_templates.html

from i18next.

Thank you for the assistance. The problem I was having stemmed from not letting i18next load the resources before starting the application. Prior to fixing the problem:

$("#page").i18n(); 

was throwing an error stating that i18n() wasn't a method.

As for the template suggestion.. yes, I'm working a "bigger app". We've already started using underscore.js as the template. By using the tags in the html

data-i18n="login.submit"

and then using the $("#page").i18n(); my template is processed.

the difference between underscore.js and handlebars seems to be a personal choice. Do you have strong reasons why handlebars is more suitable than underscore? or is it purely personal preference.

ps. Thanks for i18next.

from i18next.

it's less about preference (take the template engine you feel most comfortable). the reason why i prefer doing the translation via template helpers instead of the $(selector).i18n() function is more that the template gets rendered before translation is done (depending how your app handles this it shows first an untranslated view $("#page").html(compiledTemplate); in the browser before applying the translations $("#page").i18n();).

from i18next.

I have hooked up Handlebars to test its against how we do underscore. I have Handlebars working, but have been trying for several hours trying to get the i18next helper to work. I believe it is a setup/configuration issue.

in my main.js, I initialize i18next:

require.config({
    paths : {
        jquery : 'libs/jquery/jquery-min',
        underscore : 'libs/underscore/underscore-min',
        backbone : 'libs/backbone/backbone-optamd3-min',
        text : 'libs/require/text',
        bootstrap: 'libs/bootstrap/bootstrap.min',
        charts: 'libs/highCharts/highcharts',
        i18n: 'libs/i18next/i18next.amd.withJQuery-1.5.6',
        handlebars: 'libs/handlebars/handlebars-wrap',
        templates : '../templates'
    }

});

require([ 'app', 'i18n', 'handlebars' ], 
      function(App, i18next, hbar) {

    var i18nextOptions = { 
                    debug: true,
                ns: 'resource',
                fallbackLng: false,
                lng: 'es-MX'
            };

    i18next.init(i18nextOptions, function(t) {

        hbar.registerHelper('t', function(i18n_key) {
          var result = i18next.t(i18n_key);
            //var result = "hardcoded";
          return new Handlebars.SafeString(result);
        });

        App.initialize();
    });
});

I have tried moving the registerHelper method to other places, and end up with the same sort of error. As printed above, I get (in FireBug):

TypeError: key is undefined if (key.indexOf(o.nsseparator) > -1) {

however, if I use the comment out "hardcoded" string, it works. I believe that with my setup, there is some sort of definition problem between i18next and handlebars. Obviously I believe this should be a doable situation since you use it.

I have the code in the (right now) in the .init call back to ensure that i18next is defined and working.

if I change the look up to var result = t(i18n_key); (which should also work inside the init callback, I think), but get the same error.

I'm using the jquery/amd version of i18next. Is it possible that it isn't playing well? (or is it the more likely issue that I'm setting up dependencies like a maniac?)

Thank you.

from i18next.

not really sure where the issue is. never easy without having the complete code to play around.

one difference i see is, that we load handlebars with with the shim support: https://github.com/jamuhl/bmq-tmpl/blob/master/app/config.js

might be that handlebars has no proper amd support: https://groups.google.com/forum/?fromgroups=#!topic/requirejs/lYwXS-3qjXg

if only looking the provided error it seems the helper is called without a key?!? but i think you call it like on the i18next page `someTag {{t "myKey"}}.

from i18next.

I have figured out the problem, which of course was my fault, however I would like to propose a change to the example on the i18next documentation page.

The problem was not my configuration, it was my template.
wrong => {{t login.password}} right => {{t 'login.password'}}

I failed to put the key in quotes. I misunderstood the "key is not defined" error as being an error with the library configuration, as opposed to the actual variable "key" being undefined because it was not being pass properly.

My proposed change would be to put a check in, something along the lines of:

    Handlebars.registerHelper('t', function(i18n_key) {
        var result = (i18n_key === undefined ) ? 'bad value' : i18next.t(i18n_key);
        return new Handlebars.SafeString(result);
    });

Using this code, my improper template still parses, and the string literal 'bad value' shows up in my UI. Personally, I'm a fan of "Noob-proofing" examples. Helps to cut down on the noise like this that I've created.

Thank you for helping me resolve my issues. Feel free to close this thread. Thanks.

from i18next.

glad i could help.

from i18next.