我正在做一个简单的自定义绑定,它接受一个普通的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));
},
}
有什么想法吗?
答案 0 :(得分:2)
绑定多个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');
}
}
答案 1 :(得分:1)
我找到的最简单方法就是处理绑定一个可观察数组,如下所示:
<div class="container" data-bind="cssClassBinding: [state, type]">
</div>
然后编写自定义绑定以检查它是否是数组。