Question

我正在做一个简单的自定义绑定，它接受一个普通的observable，并将observable的值添加到绑定元素的css类列表中，如下所示：

<div class="container" data-bind="cssClassBinding: state">
</div>

ko.bindingHandlers.cssClassBinding = {//simplified example code
    init: function (element, valueAccessor) {
        $(element).addClass(ko.utils.unwrapObservable(value));
    },
}

我正在尝试做的是能够使用此绑定绑定多个值。我尝试使用另一个具有不同值的绑定，但KO仅显示每个元素的一个实例。

//won't work
<div class="container" data-bind="cssClassBinding: state, cssClassBinding: type">
</div>

所以我试图看看我能不能这样做：

<div class="container" data-bind="cssClassBinding: {state, type}">
</div>

ko.bindingHandlers.cssClassBinding = {//simplified example code
    init: function (element, valueAccessor) {
        foreach (observableValue in iDon'tKnowWhere)
            $(element).addClass(ko.utils.unwrapObservable(observableValue));
    },
}

有什么想法吗？

Answer 1

绑定多个observable的另一种方法是在绑定中创建一个对象：

<div data-bind="exampleBinding: { State: state, Type: type }"></div>

然后自定义绑定将通过valueAccessor访问这些属性（这假设状态和值是视图模型上的knockout observables）：

ko.bindingHandlers.exampleBinding = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        // read properties
        console.log(value.State());
        console.log(value.Type());
        // update properties
        value.State('test1');
        value.Type('test2');
    }
}

Answer 2

我找到的最简单方法就是处理绑定一个可观察数组，如下所示：

<div class="container" data-bind="cssClassBinding: [state, type]">
</div>

然后编写自定义绑定以检查它是否是数组。

将多个值/ observable传递给自定义绑定

2 个答案: