我正在尝试将一个复选框绑定(bind)到对象列表中的每一行,其方式与此处提出/回答的问题非常相似:Binding a list of objects to a list of checkboxes
本质上如下:
<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>
js如下:
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);
这个想法是,在初始状态下,所有输入框都被禁用,单击复选框将启用该行中的输入框。
数据来自服务器端相当深的嵌套对象,因此我想避免使用额外的 bool 值“填充”数据,即避免 new Phone(1 ,'xx',假)
(a) 因为它可能没有必要 (b) 因为结构几乎肯定会改变......
启用/禁用功能可以使用 selectedPhones
可观察对象来控制该“行”中字段的状态吗?
希望有人能帮忙......
我有一个jsfiddle here
最佳答案
您可以创建一个小辅助函数来检查给定的 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
绑定(bind)中使用此辅助函数:
<input type='text' data-bind="attr: {value:phone}, disable: $root.enableEdit(id)"/>
演示 JSFiddle .
关于javascript - Knockout.js 复选框用于控制输入字段的启用/禁用状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25204608/