Question

我正在尝试将复选框绑定到对象列表中的每一行，其方式与此处提出/回答的问题非常相似：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);

这个想法是，在初始状态下，所有输入框都被禁用，单击复选框将启用该行中的输入框。

数据来自服务器端的一个相当深层次的嵌套对象，所以我想避免填充＆＃39;带有额外布尔值的数据，即避免 new Phone(1,'xx', false) （a）因为它可能是不必要的（b）因为结构几乎肯定会改变......

启用/禁用功能可以使用selectedPhones可观察对象来控制该行中的字段状态＆＃39;？

希望有人能帮忙......

我有一个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绑定中使用此辅助函数：

<input type='text' data-bind="attr: {value:phone}, disable: $root.enableEdit(id)"/>

演示JSFiddle。

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

1 个答案: