i18n resource file loading at once and has to be used in all ViewModels for LargeScale Application in Knockout js

[Ranjith Kumar]

Hi All,


    We have a large scale application which has multiple knockout view models binded.
    So when we are loading each model we are initializing i18n, so for each viewmodel UI is hitting server and getting the resource file(i18n)


    we are following below code to initialize i18n:


                            i18n.init({
                                            "lng": lang,
                                           "debug": true,
                                           "fallbackLang": 'en',
                                           "resGetPath": AppConstants.get('LOCALIZEDPATH') + '/__ns__-__lng__.json',
                                            ns: {
                                                   namespaces: ['resource'],
                                                   defaultNs: 'resource'
                                                  }
                                           }, function (call) {
                                                 $(document).i18n();
                                          });


     The above code will call on every view model load
 
     My Question Is:
                
                1) How to load i18n file only once and reuse the file in all models
                2) Is there any better way to bind i18n resources in Knockout js
                3)  If not, then how can we load the i18n file after DOM element is successfully loaded


    Thanks in Advance
    Ranjith
               

[Jean-Sebastien Binette]

in our case, we use we use Requirejs to load components so we only make them dependent on i18n which place we need it and it becomes available and loads on the once. It's initiated once in the top model.

You could also bind it to your to vm or to knockout itself.

ko.i18n = i18n

If you want to use it in the html, you can also create a binding handler like so:
ko.bindingHandlers.textT = {
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var l = bindingContext.$root.language()
var valueUnwrapped = ko.unwrap(valueAccessor())
var translatedValue = i18n.t(valueUnwrapped)
if (translatedValue == valueUnwrapped && translatedValue.indexOf(':') > 0 && translatedValue.indexOf(':') < translatedValue.length) translatedValue = translatedValue.split(':')[1]
var tValueAccessor = function() {
return translatedValue
}
ko.bindingHandlers.text.update(element, tValueAccessor, allBindings, viewModel, bindingContext)
}
}

in this we called our vm $root.
we also have a language observable attached to our main VM. If the language change all of the i18n bindings rerun thru dependency tracking.
The if with the colon is for cases where we pass a string including another translation page, you don't need it if you only use one.