Knockout JS，如何在更改可观察数组中的值时更改样式属性

Question

Yo, I am trying to build this little game where an array with 6 sub arrays, containing 7 values each, produces a chess field.哟，我正在尝试构建这个小游戏，其中一个包含 6 个子数组的数组，每个包含 7 个值，生成一个国际象棋场。

When you click one of the fields its supposed to change color from white to red or white to yellow.当您单击其中一个字段时，它应该将颜色从白色变为红色或从白色变为黄色。 The color attribute is dependent on what value is written inside the data-array (works with the css-binding inside the nested div-tag).颜色属性取决于写入数据数组中的值（与嵌套 div 标签内的 css 绑定一起使用）。

The array "data" (built like a matrix) looks like this: [ [0,0,1,2,0,2,1], [0,0,0,0,2,2,1], etc]数组“数据”（像矩阵一样构建）看起来像这样：[ [[0,0,1,2,0,2,1], [0,0,0,0,2,2,1], etc]

In HTML I used a "forEach" loop to bind the values of the arrays to the div-tags and to produce the chess field - 42 fields in total (6*7=42).在 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>

Now I got the chess field and when I change a value in "data" before starting the script the color is set accordingly.现在我得到了国际象棋领域，当我在启动脚本之前更改“数据”中的值时，颜色会相应地设置。 When I click on a field the array-value also changes but the div-tag color does not.当我点击一个字段时，数组值也会改变，但 div 标签颜色不会。 How do I do that?我怎么做？

Answer 1

Alright I got it.好的，我明白了。

I was using a String with 42 numbers as base to create my Matrix.我使用一个带有 42 个数字的字符串作为基础来创建我的矩阵。 When clicking the field the value inside the matrix changed.单击该字段时，矩阵内的值发生了变化。 Though I also had to change the matrix back into a simple String and reuse that with my "creator-function" with which i initally created the chess-field.虽然我还必须将矩阵改回一个简单的字符串，并用我最初创建国际象棋场的“创建者函数”重用它。

long story short:长话短说：

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

If anybody knows enough about knockout can they explain why it has to be done that way?如果有人对淘汰赛有足够的了解，他们能解释为什么必须这样做吗？ I read about sleeper functions, functions that cant access observables because the access doesnt happen "directly".我读到了睡眠函数，因为访问不是“直接”发生的，所以无法访问可观察的函数。 Does it have to do with that?和那个有关系吗？

Knockout JS，如何在更改可观察数组中的值时更改样式属性

问题描述

1 个解决方案

解决方案1
0 2020-01-17 15:18:39

Knockout JS，如何在更改可观察数组中的值时更改样式属性

问题描述

1 个解决方案

解决方案1 0 2020-01-17 15:18:39

解决方案1
0 2020-01-17 15:18:39