0

我正在做一个简单的自定义绑定，它接受一个普通的 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));
    },
}

有任何想法吗？

4

2 回答 2

3

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

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

然后自定义绑定将通过 valueAccessor 访问这些属性（这假设 state 和 value 是视图模型上的剔除 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');
    }
}
于 2015-03-27T19:59:56.907 回答
1

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

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

只需编写自定义绑定以检查它是否为数组。

于 2013-04-22T17:33:26.890 回答