如何将复选框数组传递给淘汰赛自定义绑定？

Question

我正在使用淘汰赛2.2.1。 我有一组3个复选框来连接，以获得相应的值一起：

<fieldset data-role="controlgroup" id="top-colours" data-bind="topColoursLabel: { topColoursRed,topColoursBlue,topColoursGreen }"> 
    <legend>Top Colours:</legend> 
    <input type="checkbox" name="top-colours-red" data-bind="checked: topColoursRed" id="tc-check-1" /> 
    <label for="tc-check-1">Red stripes</label> 
    <input type="checkbox" name="top-colours-blue" data-bind="checked: topColoursBlue" id="tc-check-2" /> 
    <label for="tc-check-2">Blue stripes</label> 
    <input type="checkbox" name="top-colours-green" data-bind="checked: topColoursGreen" id="tc-check-3" /> 
    <label for="tc-check-3">Green stripes</label> 
</fieldset> 

结果应是例如：“红纹，蓝纹”。 我的视图模型如下：

function ColoursViewModel() { 
    var self = this; 
    self.template = "coloursView"; 
    self.topColoursRed = ko.observable(false); 
    self.topColoursBlue = ko.observable(false); 
    self.topColoursGreen = ko.observable(false); 
    self.topColoursDescription = ko.observable(""); 
} 

如何应在自定义绑定来实现这一目标？ 我尝试类似的东西：

ko.bindingHandlers.topColoursLabel = { 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     ko.utils.unwrapObservable(valueAccessor()); 
     // ... 
     var checkText = '...'; 
     viewModel.topColoursDescription(checkText); 
    } 
}; 

我不能找出如何将数组传递给我的自定义绑定订阅的3个复选框的值，因为我小白到淘汰赛。

在我看来，一个像声明：

data-bind="topColoursLabel: { topColoursRed,topColoursBlue,topColoursGreen }" 

将是巨大的，实现这一点，但我在寻找正确的方式来做到这一点。

注：我不能在这里使用计算的观察值，因为我需要从元素中获得一些其他属性 - 我的意思是标签 - 文本 - 所以需要自定义绑定。

有人可以帮忙吗？

修订的jsfiddle：http://jsfiddle.net/Sx87j/

Answer 1

事实上，自定义绑定处理程序是不是你真正需要的。你应该实现你self.coloursDescription为computed观察到，这将跟踪复选框更改并返回当前选定的条纹：

self.topColoursDescription = ko.computed(function(){ 
    var colors = []; 
    if (self.topColoursRed()) colors.push('Red stripes'); 
    if (self.topColoursBlue()) colors.push('Blue stripes'); 
    if (self.topColoursGreen()) colors.push('Green stripes'); 
    return colors.join(', '); 
}); 

同样来自标记删除自定义绑定的所有曲目，你会得到这样的事情：http://jsfiddle.net/h7Bmb/8/

更新

我可以让你的更新小提琴与顶级颜色一起工作。使其与底色一起使用也与您目前的方法看起来有点复杂。

枚举所有链接的颜色观测在你的绑定：

<fieldset data-role="controlgroup" id="top-colours" data-bind="topColoursLabel: [ topColoursRed, topColoursBlue, topColoursGreen ]"> 

更改您的自定义代码（其中ko.utils.unwrapObservable被称为线）：

ko.utils.arrayForEach(valueAccessor(), ko.utils.unwrapObservable); 

例子：http://jsfiddle.net/Sx87j/1/