Knockout.js, come cambiare un valore di array bidimensionale mappato?

Question

Ho un controller che restituisce una matrice bidimensionale di oggetti come JSON. Faccio una chiamata dal mio JavaScript:

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

Ho anche il seguente HTML:

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

Genera una bella tabella HTML bidimensionale con cellule ben colorate (basata su una classe che proviene da una proprietà a colori). Come posso ora cambiare questo colore in qualcos'altro?

Provai: board[1][1]({Color: 'red'});, ma ricevo un errore che dice che la scheda [1] non esiste ...

E un'altra domanda, come posso aggiungere più di una classe al vincolo? Provai:

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

Ma poi ottengo:

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"

È un bug o sto facendo qualcosa di sbagliato?

Answer 1

Il plug -in di mappatura trasformerà l'array in un osservabile e le proprietà in osservabili.

Per il tuo primo caso, dovresti scartare l'array osservabile facendo: board.board()[1][1]

Per l'altra domanda, il colore è osservabile. Se lo stai usando in un'espressione e vuoi ottenere il suo valore, allora devi fare il colore (). Quindi, sarebbe:

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