knockout.js - 分组绑定(bind)以避免代码重复

Question

是否可以对绑定(bind)进行分组？

例如enable 和 css 绑定(bind)都引用导致重复的相同条件。

<div data-bind="enable: errors().length == 0, css: { green: errors().length == 0 }">

和

例如多个元素上的绑定(bind)引用相同的条件。

<div data-bind="css: { green: errors().length == 0 }">
<div data-bind="css: { blue: errors().length == 0 }">
<div data-bind="css: { red: errors().length == 0 }">

Answer 1

您可以使用 ko.compulated ( documentation ) 来保存条件逻辑:

this.noErrors = ko.computed(function(){
    return this.errors().length == 0;
}, this);

然后您可以将绑定(bind)简化为:

<div data-bind="enable: noErrors, css: { green: noErrors }">

和

<div data-bind="css: { green: noErrors }">
<div data-bind="css: { blue: noErrors }">
<div data-bind="css: { red: noErrors }">

或者您可以创建自己的 custom bindings或者您可以使用新的预处理功能 extend Knockout's binding syntax封装您的自定义“分组”逻辑。