Knockout.js，如何更改映射的二维数组的值？

Question

我有一个控制器，它以 json 格式返回二维对象数组。我从我的 javascript 拨打电话：

$.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>

它会生成一个漂亮的二维 html 表格，其中包含漂亮的彩色单元格（基于来自 Color 属性的类）。我现在如何将这种颜色更改为其他颜色？

我试过了：board[1][1]({Color: 'red'});，但我收到一条错误消息，说 board[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"

这是一个错误还是我做错了什么？

Answer 1

映射插件会将您的数组转换为 observableArray，并将您的属性转换为 observables。

对于第一种情况，您需要通过执行以下操作来解开可观察数组：board.board()[1][1]

对于另一个问题，颜色是可观察的。如果您在表达式中使用它并想要获取它的值，那么您需要执行 Color()。所以，它看起来像：

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