Javascript 如何跟踪ko.js中多个复选框的状态更改

这是小提琴：https:

我想要达到的目标：

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

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

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

在init函数中，我填充了array：

  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 function中，我设置了可观察属性和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和索引）：

但这并不像预期的那样有效

---

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

一般真理：如果创建编号变量（

item1

，

item2

，

item3

），你做错了什么。使用数组

根据从服务器获取状态更新的方式，需要更改

updateState

的实现。我下面的实现假设您得到一个布尔值数组，例如

[true，true，false]

制作接受

params

对象并用它初始化自己的viewmodels是个好主意，下面的代码就是这样做的

功能项（参数）{
var self=这个；
self.id=ko.可观察（参数id）；
self.name=ko.observable（参数名称）；
self.state=ko.observable（参数状态）；
}
函数项列表（参数）{
var self=这个；
self.items=ko.observearray（params.items.map（item=>newitem（item））；
self.updateState=函数（）{
var items=self.items（），
randomStates=items.map（item=>Math.random（）<0.5）；
randomStates.forEach（（state，i）=>items[i]。state（state））；
};
}
var viewModel=新项目列表({
项目：[
{id:“item1”，名称：“item1”，状态：false}，
{id:“item2”，名称：“item2”，状态：false}，
{id:“项目3”，名称：“项目3”，状态：true}，
]
});
应用绑定（视图模型）
.switchName{
字体大小：粗体；
}
前{
位置：绝对位置；
右：0；
排名：0；
左：50%；
字体大小：较小；
]

模拟随机更新
您的复选框值是基于
项目状态显示的。state
。您为什么需要
视图模型中的
状态1
、
状态2
和
项目状态
属性？您总是可以使用
可用项
访问它们，就像在
活动项
中如何操作一样。数据是如何保存和保存的从服务器获取？它基于
id
字段？因为对于state1、state2和state3，我模拟的是真实代码中的一种情况，我从服务器接收数据，使用ko.js mapp pluginBut映射。为什么需要多个连续编号的状态属性？复选框state在
项
对象中。为什么需要在
ViewModel
中重复信息。当发生更改时，您需要同时更新这两个位置。即使您从服务器获取数据，您也需要使用
id
参数来标识要更新的复选框？这是因为我无法控制来自服务器端的内容。在这种情况下，我将如何对其进行编码？您会怎么做你提议？非常感谢你这么好的解释。但是我不能将它标记为已回答，因为我仍然不知道如何处理这个问题，因为你的假设是我从服务器返回数组，但它不是数组，我从服务器返回state1、state2和state3。你能解释一下我如何修改su的代码吗ch case？@johndoe你是如何得到它的？作为一个对象？它到底是什么样子？这是一个确切的调用：BaseViewModel.call（这个，{“state1”：1，“state2”：1，“state3”：0，}，baseEndpoint+/status'）；在BaseViewModel中我有一个函数：BaseViewModel（默认值，remoteUrl，映射）{if（映射==未定义）{mappings={}；}var self=this；self.remoteUrl=remoteUrl；//可观察属性ko.mapping.fromJS（默认值，映射，self）；self.fetching=ko.Observable（false）；}@johndoe不在评论中发布代码。将其添加到您的问题中，这样更易于阅读。@johndoe…在您进行此操作时，请像我在回答中所做的那样制作一个功能代码示例，并使用Knockout.js和映射插件以及带有绑定的HTML视图，以便有一个“运行代码片段”按钮来演示此问题。
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)