Question

我在模板中有一个列表项，它使用“可见”绑定以及同一元素上的自定义绑定：

<li data-bind="visible: (Applicable == 'All'), highlight: Selected().indexOf('false',0) == -1">

这将检查视图模型集合的每个绑定成员，如果“Applicable”属性的值为“All”，则使列表项可见。

我还使用自定义绑定将类应用于列表项，具体取决于绑定成员的“Selected”属性是否包含字符串'false'。

    ko.bindingHandlers.highlight = {
        update: function (element, valueAccessor, viewModel) {
            var value = valueAccessor();
            ko.utils.unwrapObservable(value) ? $(element).addClass( "selected", 1000 ) : $(element).removeClass( "selected", 1000 ); 
        }
    };

问题是“突出显示”自定义绑定似乎覆盖/替换可见绑定，并且当突出显示绑定发生时，Visible绑定隐藏的列表项会重新出现。似乎可见绑定执行，然后突出显示绑定执行并忽略可见绑定的结果。

我希望我已经解释过这个。

我可以将可见绑定的功能合并到我的自定义绑定中，以便我只调用1个绑定事件，该事件确定列表项是应该是可见的还是隐藏的还是可见的还有高亮应用？

Answer 1

您可以考虑使用计算的observable来确定是否添加css类，而不是绑定处理程序。在下面的代码片段中，isSelected值是一个计算的observable。

<li data-bind="visible: applicable === 'all', css: {selected: isSelected}">

当然，我不确切知道你的代码在做什么，因为我们看不到所有的代码。但它的一个选择。另一种方法是编写绑定处理程序来完成所有操作，正如您所建议的那样。

KnockoutJS - 相互重叠的组合绑定

1 个答案: