为什么这个淘汰自定义绑定只对foreach的第一个元素起作用?

Question

我正在尝试生成一个选项卡导航列表。我使用的是knockout的foreach绑定，但它仅为列表中的第一个项目呈现模板。

如果我删除自定义绑定i18nTranslateText并简单地使用text绑定代替它，那么foreach呈现tabs数组中的两个项目。

UPDATE:如果我注释掉viewModel.LanguageSelected.subscribe(...);行，那么这也适用于列表中的两个项目。

我在哪里做错了?

$(function () {
ko.bindingHandlers.i18nTranslateText = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var param1 = valueAccessor(); // not used, but could be used.
        $(element).html(jQuery.i18n.prop(param1));
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var param1 = valueAccessor(); // not used, but could be used.
        $(element).html(jQuery.i18n.prop(param1));
        viewModel.LanguageSelected.subscribe(function (key) {
            if (key == 'English') {
                viewModel.loadBundles('en');
            }
            else {
                viewModel.loadBundles('es');
            }
            $(element).html(jQuery.i18n.prop(param1));
        }.bind(this));
    }
};
var View = new ViewModel();
ko.applyBindings(View.Load());
});
function ViewModel()
{
    var self = this;
    self.tabs = ['abc', 'xyz'];
    self.Load = function () {
    return self;
    }
}
<ul class="nav nav-tabs" data-bind="foreach: tabs">
    <li>
    <a href="#" data-bind="i18nTranslateText: $data"></a></li>
</ul>

Answer 1

问题是在视图模型上没有定义属性LanguageSelected。

1. ko拾取数组，开始每次渲染。现在索引i = 0，并开始。
2. 为数组
中索引i处的项命中i18nTranslateText部分
3. 在自定义绑定处理程序上调用init。工作，更新元素html
4. 现在在自定义绑定处理程序上调用update。
5. 执行到达viewModel.LanguageSelected.subscribe，这会引发一个脚本错误Uncaught TypeError - undefined。所以执行停止，最后显示一个项目

在第二个场景中，如果注释掉viewModel.LanguageSelected.subscribe，则一切正常。这是你的具体问题的答案，但我猜在问题中粘贴的视图模型仍然不完整。希望这对你有帮助!