3

这是我的场景。

我想创建一个单独的 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>

预期效果：

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

1 回答 1

0

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

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

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

于 2012-12-07T15:40:24.190 回答