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>

结果应为：＆＃34;红色条纹，蓝色条纹＆＃34;。我的viewmodel如下：

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，因为我需要从元素中获取一些其他属性 - 我的意思是标签 - 用于文本 - 因此需要自定义绑定。

有人可以帮忙吗？

UPDATED 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/

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

1 个答案: