javascript - Knockout.js 复选框用于控制输入字段的启用/禁用状态

Question

我正在尝试将一个复选框绑定(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

Answer 1

您可以创建一个小辅助函数来检查给定的 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 .