Question

这是我的情景。

我想创建一个单独的KnockoutJS绑定提供程序来处理我的页面上的翻译，这些翻译将读取页面加载时出现或页面加载后创建的任何元素的data-alias属性（可能在子模板中创建）由knockout呈现并检索别名的翻译并将其作为元素的文本应用。我仍然希望能够独立调用ko.applyBindings(model, element);来处理网页的data-bind属性，但我希望单独调用ko.applyBindings，以便翻译可以应用于{ {1}}属性。任何人都知道我如何能够支持两者并使他们独立行事？

以下是该流程应该如何进行的示例。

HTML标记/模板：

data-alias

在页面加载时，会调用对数据别名的绑定提供程序应用绑定：

<fieldset>
    <legend data-alias="SomeTitle"></legend>
    <div class="row-container">
        <div class="control-group">
            <label class="control-label" data-alias="LabelAlias"></label>
            <div class="controls">
                <input type="text" data-bind="value: SomeObservable" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" data-alias="AnotherLabelAlias"></label>
            <div class="controls">
                <input type="text" data-bind="value: AnotherObservable" />
            </div>
        </div>
    </div>
</fieldset>

同样在页面加载时，会有一个服务调用来检索页面所需的数据，并且在检索时它会将绑定应用于数据：

<script type="text/javascript">
    $(function() {
        // Lets assume translations is a dictionary of alias to translation
        // that is loaded with the page synchronously
        ko.applyBindings(translations); 
    });
</script>

预期效果：

页面加载。
翻译已应用。
启动服务电话以检索数据。
服务电话返回。
数据将转换为视图模型并绑定到页面（并保留翻译）。

Answer 1

对服务调用返回的数据使用knockout。

但是不要使用淘汰赛进行翻译 - 你想要做的就是没有像淘汰赛这样的框架。以下是如何做到这一点：

var translations = {};
translations["LabelAlias"] = "Bonjour";
translations["AnotherLabelAlias"] = "Au Revoir";

$("[data-alias]").each(function(index, element){
    var aliasName = element.getAttribute("data-alias");
    var aliasValue = translations[aliasName];
    $(element).text(aliasValue);
});

这是一个工作小提琴：http://jsfiddle.net/qjGwR/

<强>更新您提到您已动态加载要翻译的内容。不是问题！我已经更新了小提琴 - http://jsfiddle.net/qjGwR/1/。

function translate(translations, selector) {
  if (selector == null) { selector = ''; }
  $(selector + " [data-alias]").each(function(index, element){
    var aliasName = element.getAttribute("data-alias");
    var aliasValue = translations[aliasName];
    $(element).text(aliasValue);
  });
}

translate(helloTranslations);

// Add something to the DOM
var moreContent = '<label class="control-label" data-alias="ThirdLabelAlias">Three</label><div class="controls"><input type="text" data-bind="value: somethingElse" /></div>'

$('#moreContent').html(moreContent);
translate(helloTranslations, '#moreContent');

我们将翻译行为移动到一个方法，传入我们想要应用的翻译，并告诉它我们想要翻译的DOM的哪个部分。

处理多个页面级绑定提供程序

1 个答案: