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

Question

这是我的场景。

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

这是一个流程应该如何进行的示例。

HTML 标记/模板：

<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>

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

<script type="text/javascript">
    $(function() {
        $.ajax({...}) // Omitted for brevity
            .done(function(data) {
                var viewModel = new my.namespace.SomeViewModel(data);
                ko.applyBindings(viewModel);
            });
    });
</script>

预期效果：

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

Answer 1

对从服务调用返回的数据使用敲除。

但是不要对翻译使用敲除 - 你想要在那里做的事情可以在没有敲除这样的框架的情况下处理。以下是你可以做到的：

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 的哪一部分。