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

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 }"

实现这一点会很棒，但我正在寻找正确的方法。

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

有人可以帮忙吗？

更新的 jsFiddle：http://jsfiddle.net/Sx87j/

Answer 1

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

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/