How to use Knockout observables in i18next?

Question

I\'m trying to somehow dynamically use i18next translations together with Knockout.js, but I cant figure out how.

Neither a custom Knockout binding or the i18next jQ

Answer 1

I've updated the code to support translating HTML attributes as well.

Here is a working demo: http://jsfiddle.net/remisture/GxEGe/

HTML

HTML/text

Attribute

JS

define(['knockout', 'i18next'], function (ko, i18n) {
    ko.bindingHandlers.i18n = {
        update: function (element, valueAccessor, allBindings) {
            var key = ko.unwrap(valueAccessor()),
                options = ko.toJS(allBindings.get('i18n-options') || {}),
                translation,
                parts,
                attr;

            // Check whether we are dealing with attributes
            if (key.indexOf('[') === 0) {
                parts = key.split(']');
                key = parts[1];
                attr = parts[0].substr(1, parts[0].length - 1);
            }

            translation = i18n.t(key, options);

            if (attr === undefined) {
                // Check whether the translation contains markup
                if (translation.match(/<(\w+)((?:\s+\w+(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/)) {
                    //noinspection InnerHTMLJS
                    element.innerHTML = translation;
                } else {
                    // Check whether the translation contains HTML entities
                    if (translation.match(/&(?:[a-z]+|#x?\d+);/gi)) {
                        //noinspection InnerHTMLJS
                        element.innerHTML = translation;
                    } else {
                        // Treat translation as plain text
                        element.innerText = translation;
                    }
                }
            } else {
                // Add translation to given attribute
                element.setAttribute(attr, translation);
            }
        }
    };
});