如何在 ko.js 中跟踪多个复选框的状态变化

Question

这里是小提琴：https：https://jsfiddle.net/t5v7fmoq/1/

我想要达到的目标：

我希望能够根据收到的状态变量（可以有真值或假值）自动更新复选框视图

三个复选框的状态变量（带有初始状态）是：

  self.state1 = ko.observable(true);
  self.state2 = ko.observable(false);
  self.state3 = ko.observable(true);

在初始化函数中我填充 observablearray:

  self.init = function() {
    self.availableItems([
      new Item(1, "item1", self.state1(), self.onItemStateChange),
      new Item(2, "item2", self.state2(), self.onItemStateChange),
      new Item(3, "item3", self.state3(), self.onItemStateChange)
    ]);

在 Item 函数中，我设置了 observable 属性和 onChnage 方法：

function Item(id, name, state, onChange) {
  var self = this;

  self.id = ko.observable(id);
  self.name = ko.observable(name);
  self.state = ko.observable(state);

  self.state.subscribe(function(newValue) {
    onChange(self, newValue);
  });
}

使用 setTimeout 我伪造了一个一次性的 ajax 调用，它设置了新的状态：

setTimeout(()=>{
self.state1(false)
self.state2(true)
self.state3(false)
self.availableItems()[0].state(self.state1())
self.availableItems()[1].state(self.state2())
self.availableItems()[2].state(self.state3())
},1000)

但是，我想要实现的是，我想避免输入以下内容：

self.availableItems()[0].state(self.state1())
self.availableItems()[1].state(self.state2())
self.availableItems()[2].state(self.state3())

我想使用常见做法和最佳编码来编写此行为并跟踪此状态... 我不知道如何以不同的方式解决这个问题。

我尝试使用这样的数组（以便稍后我可以使用 forach 和索引）：

setTimeout(()=>{
self.state1(false)
self.state2(true)
self.state3(false)
self.availableItems()[0].state(self.itemStatus()[0])
self.availableItems()[1].state(self.itemStatus()[1])
self.availableItems()[2].state(self.itemStatus()[2])
},1000)

但这并没有按预期工作。

简而言之，我想了解对行为进行编码的编码方法，以便在从服务器接收到新状态时，将正确的状态应用于正确的复选框，并正确更新正确的复选框视图。

Answer 1

一般事实：如果您创建编号变量（item1、item2、item3），那么您做错了什么。使用数组。

根据如何您从服务器获取状态更新，updateState 的实现需要更改。我下面的实现假设你得到一个布尔值数组，例如[true, true, false].

让视图模型接受params 对象并用它初始化自己是个好主意，下面的代码就是这样做的。

function Item(params) {
    var self = this;

    self.id = ko.observable(params.id);
    self.name = ko.observable(params.name);
    self.state = ko.observable(params.state);
}

function ItemList(params) {
    var self = this;

    self.items = ko.observableArray(params.items.map(item => new Item(item)));

    self.updateState = function () {
        var items = self.items(),
            randomStates = items.map(item => Math.random() < 0.5);

        randomStates.forEach((state, i) => items[i].state(state));
    };
}


var viewModel = new ItemList({
    items: [
        {id: "item1", name: "Item 1", state: false},
        {id: "item2", name: "Item 2", state: false},
        {id: "item3", name: "Item 3", state: true},
    ]
});

ko.applyBindings(viewModel);

.switchName {
  font-weight: bold;
}
pre {
  position: absolute;
  right: 0;
  top: 0;
  left: 50%;
  font-size: smaller;
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: items">
  <div class="switchBox">
    <input type="checkbox" data-bind="checked: state, attr: {id: id}">
    <label class="switchName" data-bind="text: name, attr: {for: id}"></label>
  </div>
</div>
<button data-bind="click: updateState">Simulate Random Update</button>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>