2

У меня есть контроллер, который возвращает двухмерный массив объектов как json. Я делаю вызов из моего JavaScript:Knockout.js, как изменить значение отображаемого двумерного массива?

$.getJSON("/Game/GetBoard", function (json) { 
    data = json; 
    board = ko.mapping.fromJS({ board: data }); 
    ko.applyBindings(board, $('.board')[0]); 
}); 

У меня также есть следующий HTML:

<table> 
    <tbody data-bind="foreach: board">   
     <tr data-bind="foreach: $data"> 
      <td data-bind="attr: { class: Color }"></td> 
     </tr> 
    </tbody> 
</table> 

Это создает хорошую 2 мерной HTML таблицу с красиво окрашенными клетками (на основе класса, который исходит от Цветное свойство). Как я могу теперь изменить этот цвет на что-то еще?

Я пробовал: board[1][1]({Color: 'red'});, но я получаю ошибку о том, что плата [1] не существует ...

И еще один вопрос, как я могу добавить более одного класса к связыванию? Я пробовал:

... 
<td data-bind="attr: { class: Color + ' some-other-class' }"></td> 
... 

Но я получаю:

class="function b() {  if (0 < arguments.length) {   if (!b.equalityComparer || !b.equalityComparer(d, arguments[0])) {    b.H(), d = arguments[0], b.G();   }   return this;  }  r.T.Ha(b);  return d; } some-other-class" 

Является ли это ошибка или я делаю что-то не так?

ответ

3

Плагин сопоставления превратит ваш массив в наблюдаемый массив и ваши свойства в наблюдаемые.

Для первого случая, вам нужен будет разворачивать наблюдаемый массив, выполнив: board.board()[1][1]

Для другого вопроса, цвет является наблюдаемым. Если вы используете его в выражении и хотите получить его значение, вам нужно сделать Color(). Итак, это будет выглядеть так:

<td data-bind="attr: { class: Color() + ' some-other-class' }"></td> 
+0

Спасибо, это мне очень помогло. Я новичок в нокауте и до сих пор делаю эти глупые ошибки ... Я до сих пор не понимаю, почему '' td data-bind = "attr: {class: Color}"> 'работает. Вы можете это объяснить? –

+2

Все привязки проверяют, прошли ли они наблюдаемые и попытаются развернуть их. Однако, если вы используете выражение ('Color() + 'some-other-class'), то оно оценивается до того, как оно попадет в привязку. –

Смежные вопросы