Knockout JS，如何在更改可观察数组中的值时更改样式属性
Posted
技术标签:
【中文标题】Knockout JS，如何在更改可观察数组中的值时更改样式属性【英文标题】：Knockout JS, How to change Style attributes when changing a value inside an observable array 【发布时间】：2020-05-04 07:04:19 【问题描述】：哟，我正在尝试构建这个小游戏，其中包含 6 个子数组（每个包含 7 个值）的数组生成一个国际象棋场。
当您单击其中一个字段时，它应该将颜色从白色变为红色或从白色变为黄色。颜色属性取决于写入数据数组中的值（与嵌套 div 标记内的 css 绑定一起使用）。
数组“数据”（像矩阵一样构建）如下所示： [ [0,0,1,2,0,2,1], [0,0,0,0,2,2,1]等]
在 html 中，我使用“forEach”循环将数组的值绑定到 div 标记并生成国际象棋字段 - 总共 42 个字段 (6*7=42)。
<body>
<div class="playground">
<div class="score">
<div id="p1" style="flex: 2;"></div>
<div class="void" style="flex: 3;"></div>
<div id="p2" style="flex:2"></div>
</div>
<div class="container1" data-bind="foreach: data.matrix">
<div class="container2" data-bind="foreach: $data">
<div class="blocks">
<div data-bind="css: corny: $data >= '0', white: $data === '0', yellow1: $data === '1', red2: $data === '2',
attr: 'id': $parentContext.$index() + '_' + $index(),
click: $root.chipInserted">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
现在我得到了国际象棋字段，当我在启动脚本之前更改“数据”中的值时，颜色会相应设置。当我点击一个字段时，数组值也会改变，但 div 标签颜色不会。 我该怎么做？
【问题讨论】：
【参考方案1】：好的，我知道了。
我使用一个包含 42 个数字的字符串作为基础来创建我的矩阵。单击该字段时，矩阵内的值发生了变化。虽然我还必须将矩阵改回一个简单的字符串，并使用我最初创建国际象棋领域的“创建者函数”重用它。
长话短说：
let result = self.addColor(id, self.data);
//'result' is the new matrix with the changed value
let resultString = self.matrixToString(result());
//'resultString' is the conjoined array - a simple string made from 'result-matrix'
//with a length of 42
let newMatrix = self.Spielfeld.creator(resultString);
//now put that String into the "matrix-creator function" in order to create the
//updated matrix
self.data(newMatrix);
//put the new matrix into the observable and your viewmodel should update
如果有人对淘汰赛有足够的了解，他们能解释一下为什么必须这样做吗？ 我阅读了有关睡眠函数的信息，这些函数无法访问可观察对象，因为访问不会“直接”发生。跟这个有关系吗？
【讨论】：
以上是关于Knockout JS，如何在更改可观察数组中的值时更改样式属性的主要内容，如果未能解决你的问题，请参考以下文章
将多个输入绑定到可观察数组中的同一变量（Knockout.JS）