javascript - 如何在 i18next 中使用 Knockout observables？

Question

我正在尝试以某种方式动态地将 i18next 翻译与 Knockout.js 一起使用，但我不知道如何做。

自定义 Knockout 绑定(bind)或 i18next jQuery 插件似乎都无法处理可观察值。

可以在这里找到我正在努力实现的演示:http://jsfiddle.net/rdfx2/1/

解决方法是这样的，但如果可能的话，我宁愿避免这种情况:

<div data-bind="text: translate('key', observable)"></div>

self.translate = function (key, value) {
   return i18next.t(key, {
      "var": value
   });
};

谢谢，

Answer 1

我对 i18next 不是很熟悉，所以我可能错误地使用了 i18next，但是您可以通过创建一个 bindingHandler 轻松地实现这一点。这种支持传递 optional 的 bindingHandler 的一个非常简单的版本可能如下所示:

ko.bindingHandlers['translatedText'] = {
    update: function(element, valueAccessor, allBindings){
        var key = ko.unwrap(valueAccessor());
        var options = ko.toJS(allBindings.get('translationOptions') || {});
        var translation = i18n.t(key, options);
        element.innerText = translation;
    }
};

给定以下 i18next 初始化代码:

i18n.init({
    lng: "en",
    debug: true,
    resStore: {
        en: {
            translation: {
                'myTextKey': 'My translated value is "__value__"',
                'otherTextKey': 'This is just a text which does not use options'
            }
        }
    }
});

您可以将它与以下 HTML 一起使用:

<input type="text" data-bind="value: input, valueUpdate: 'afterkeydown'"/>
<div data-bind="translatedText: 'myTextKey', translationOptions: { value: input }"></div>
<div data-bind="translatedText: 'otherTextKey'"></div>

以及以下 View 模型:

function ViewModel(){
    this.input = ko.observable();
}

ko.applyBindings(new ViewModel);

我已经将上面的代码保存到一个 jsfiddle 中，您可以在 http://jsfiddle.net/md2Hr/ 找到它。