Question

我正在尝试生成标签式导航列表。我正在使用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。这就是发生的事情，

ko拿起数组开始foreach渲染。现在索引i = 0，然后开始。
点击数组

i18nTranslateText

在自定义绑定处理程序上调用init。 Works，更新元素html
现在在自定义绑定处理程序上调用update。
执行到达viewModel.LanguageSelected.subscribe，这会引发脚本错误Uncaught TypeError - undefined。因此执行停止，最终显示一个项目

在你的第二个场景中，如果你注释掉viewModel.LanguageSelected.subscribe，那么一切都很好。这是您具体问题的答案，但我想问题中粘贴的视图模型仍然不完整。希望这有帮助！

为什么这个淘汰赛自定义绑定仅适用于foreach的第一个元素？

1 个答案: