KnockoutJS with jquery.i18n.properties and custom binding

[leslie Lau]

I'm still trying to bind to translated text in a table cell.  

I first load my translation file:

jQuery.i18n.properties({
    name: 'Terms',
    path: 'trans/',
    mode: 'map',
    cache: 'true',
    callback: function () {
        console.log("Loaded i18n file...");
 
        // Accessing a value with placeholders through the map
        console.log(jQuery.i18n.prop('MYKEY'));
    }
});

So I see the translated text in the console log.  All good.

I bind my table cell data inside a Template:

<td data-bind="i18nTranslateText: printConditionDetails().name">LABEL_PRINT_CONDITION</td>

I use koExternalTemplateEngine to load the template.  All good so far.

I created a custom binding like this:

ko.bindingHandlers.i18nTranslateText = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var param1 = valueAccessor(); // not used, but could be used.
        var key = $(element).text();
 
        $(element).html(jQuery.i18n.prop(key));
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        // At this point your language have change, update all labels
    }
};

But for some reason, jQuery.i18n is "undefined".  I think it's some sort of namespace/scope issue but I can't get a handle on it.

jQuery.i18n variable was initialized but when the custom binding is triggered, jQuery.18n becomes "undefined".

Anyone knows why and can guide me to how to fix this?

Thanx in advance,
Lesli

[leslie Lau]

Nevermind...it's working now....I sourced 2 jquery script files in my html file.  The second sourced one clobber the value that was set originally by jQuery.i18n.properties.

Leslie

[atwood...@gmail.com]

Were you able to get the updates working?

[Leslie Lau]

Yes. I am using i18n and knockout binding to translate my web page. 

--
You received this message because you are subscribed to a topic in the Google Groups "KnockoutJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/knockoutjs/y36z-_Sgq0E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[leslie Lau]

I didn't use the update custom binding handler.....

I make sure this is the first thing that is done...fetch the translation file from the server:

jQuery.i18n.properties({
    name: 'Terms',
    path: 'trans/',
    mode: 'map',
    cache: 'true',
    callback: function () {
        console.log("Loaded i18n file...");
 
        // Accessing a value with placeholders through the map
        console.log(jQuery.i18n.prop('MYKEY'));
    }
});

Then initialize my model:

var i18nViewModel = {
    i18nTranslateText: function(key) {
        return jQuery.i18n.prop(key);
    }
};

Then bind my model:

$(document).ready(function() {
    ko.applyBindings(i18nViewModel);

}

And finally all throughout my web page, I data-bind wherever I need translation:

<th data-bind="text: i18nTranslateText('LABEL')">
</th>

That's it.

[Kevin Atwood]

Can this handle a dynamic language change?

[leslie Lau]

Hi Kevin,

Do you mean that the user goes and changes the language setting for the browser when he/she is viewing the web page?  I assume that the user would just be able to refresh the web page and the correct language file would be fetched from the server and the web pages re-rendered using the new translated file.

Leslie