我试图将一个复选框绑定到对象列表中的每一行,以非常类似于这里问/回答的问题的方式:将对象列表绑定到复选框列表
基本上如下:
<ul data-bind="foreach: phones">
<li>
<input type='text' data-bind="attr: {value:phone}, disable: $root.selectedPhones"/>
<input type="checkbox" data-bind="attr: {value:id}, checked: $root.selectedPhones" />
</li>
</ul>
<hr/> selected phones:
<div data-bind="text: ko.toJSON($root.selectedPhones)"></div>
<hr/> phones:
<div data-bind="text: ko.toJSON($root.phones)"></div>
function Phone(id,phone) {
this.id = id;
this.phone = phone;
}
var phones_list = [
new Phone(1, '11111'),
new Phone(2, '22222'),
new Phone(3, '33333')
];
var viewModel = {
phones: ko.observableArray(phones_list),
selectedPhones: ko.observableArray()
};
ko.applyBindings(viewModel);
这个想法是,在初始状态下,所有的输入框都是禁用的,单击复选框将启用该行中的输入框。
数据来自一个相当深嵌套的对象从服务器端,所以我想避免"填充"数据与一个额外的布尔值避免 new Phone(1,'xx', false)
(a)因为它可能是不必要的(b)因为结构几乎肯定会改变…
selectedPhones
可观察对象可以被enable/disable功能用来控制该"行"中字段的状态吗?
希望有人能帮忙....
这里有一个jsfield
您可以创建一个小的辅助函数来检查给定的id
是否在selectedPhones
中:
var viewModel = {
phones: ko.observableArray(phones_list),
selectedPhones: ko.observableArray(),
enableEdit: function(id) {
return ko.utils.arrayFirst(viewModel.selectedPhones(),
function(p) { return p == id })
}
};
那么你可以在enable
绑定中使用这个辅助函数:
<input type='text' data-bind="attr: {value:phone}, disable: $root.enableEdit(id)"/>
演示JSFiddle。