Question

我已经a scenario in which我有多个复选框，对于每个复选框，所有其他复选框都是＆＃39;只要选择了任何其他复选框，值就应该更改（并且应该更新它们相应的可观察对象）为false。基本上，复选框应该像单选按钮一样，但每个复选框都绑定到数据库字段。

<input type="checkbox" data-bind="checked: NameIsJohn">John</input>
<input type="checkbox" data-bind="checked: NameIsJerry">Jerry</input>
<input type="checkbox" data-bind="checked: NameIsJenny">Jenny</input>
<input type="checkbox" data-bind="checked: NameIsJake">Jake</input>
<input type="checkbox" data-bind="checked: NameIsJeffrey">Jeffrey</input>
<input type="checkbox" data-bind="checked: NameIsJack">Jack</input>

var vm = function() {
    this.NameIsJohn = ko.observable();
    this.NameIsJerry = ko.observable(true);
    this.NameIsJenny = ko.observable();
    this.NameIsJake = ko.observable();
    this.NameIsJeffrey = ko.observable();
    this.NameIsJack = ko.observable();   
};

一种方法是使用jQuery将点击处理程序附加到每个复选框，但这似乎不会更新底层的observable。

//var variable = the input element
$variable.filter(':checked').not(this).removeAttr('checked');

另一种方法是使用自定义Knockout函数或某种自定义订阅。我想出的的作品，但它的hacky。想象一下，如果有十个或更多的可观察者要更新！

vm.ChangeCheckbox = function (CheckboxName) {
                vm.NameIsJohn(false);
                vm.NameIsJerry(false);
                vm.NameIsJenny(false);
                vm.NameIsJake(false);
                vm.NameIsJohn(false);
                vm.NameIsJohn(false);
                if (CheckboxName === 'John') {
                    vm.NameIsJohn(true);
                }   else if (CheckboxName === 'Jerry') {
                    vm.NameIsJerry(true);
                } ...
//etc.

单击复选框时，是否有更动态的方式更新此集合中的所有可观察对象？

Answer 1

我觉得有一个变量可以指示哪个是复选框 - 你可以在点击时设置它 - 以及所有按钮＆＃39; checked属性附加到计算的observables，其功能基本上是＃34;我是那个吗？＆＃34;

this.NameIsJohn = ko.computed(isIt('John'));

在复选框单击上动态更新多个observable

1 个答案: