Knockout JS, как изменить атрибуты стиля при изменении значения внутри наблюдаемого массива - PullRequest
Новая
       6

Knockout JS, как изменить атрибуты стиля при изменении значения внутри наблюдаемого массива

0 голосов
/ 17 января 2020

Эй, я пытаюсь построить эту маленькую игру, в которой массив с 6 подмассивами, каждый из которых содержит 7 значений, создает шахматное поле.

Когда вы щелкаете одно из полей, оно должно изменить цвет с белого на красный или с белого на желтый. Атрибут цвета зависит от того, какое значение записано в массиве данных (работает с привязкой css внутри вложенного тега div).

Массив «данные» (построенный как матрица) выглядит следующим образом: [[0,0,1,2,0,2,1], [0,0,0,0,2,2 , 1] и т. Д.]

В HTML я использовал «forEach» l oop, чтобы привязать значения массивов к тегам 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>

Теперь у меня есть шахматное поле, и когда я изменяю значение в «data» перед запуском скрипта, цвет устанавливается соответственно. Когда я щелкаю поле, значение массива также изменяется, а цвет тега div - нет. Как мне это сделать?

1 Ответ

0 голосов
/ 17 января 2020

Хорошо, я понял.

Я использовал строку с 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

Если кто-нибудь знает достаточно о нокауте, могут ли они объяснить, почему это нужно сделать таким образом? Я читал о спящих функциях, функциях, которые не могут получить доступ к наблюдаемым, потому что доступ не происходит "напрямую". Это связано с этим?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...