1

我正在使用淘汰赛 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/

4

1 回答 1

1

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

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/

于 2013-04-27T07:09:11.860 回答