Question

我有一些通过服务器发送的数据，格式如下：

[
  {"Username":"user1@domain.com", "id":1},
  {"Username":"user2@domain.com", "id":2},
  {"Username":"user3@domain.com", "id":3}
]

我将它绑定到一个表，但我希望能够在选中复选框时向表行添加一个类（表示它已被选中）。这是最终会有效的，我知道问题是Selected不是我数据中当前的属性。

<table>
    <tbody data-bind="foreach: Items">
        <tr data-bind="css:{selected: Selected}">
            <td>
                <input type='checkbox' data-bind="attr:{name: id}, checked: Selected" />
            </td>
            <td data-bind="text: Username"> </td>
        </tr>
    </tbody>
</table>

由于Selected的概念纯粹是针对用户界面的，因此服务器通过网络为我的数据中的每个项目发送信息似乎有点蠢。

我想要发生的事情基本上是这样的：http://jsfiddle.net/xSSMX/但不必在每个项目上添加可观察的Selected属性。

如何为数据中的每个现有项添加属性以实现此目的？

Answer 1

您可以使用map将字段添加到您从服务器获取的数组中，如此...

data = data.map(function(item) {
            item.Selected = ko.observable(false);
            return item;
        });

将为每个项目添加选定内容。虽然如果我没有弄错，所有浏览器都不支持地图，所以你必须添加支持，你可以使用类似于这里找到的功能... http://www.tutorialspoint.com/javascript/array_map.htm。或者你可以使用jQuery的$.each来实现相同的效果。

Answer 2

当服务器发送数据时，您可以创建userModel(id, userName)。默认情况下，此模型在selected上有false。我加入了一个jsFiddle，使其更加清晰。

http://jsfiddle.net/xSSMX/1/

Knockout.js - 向服务器端发送的数据添加属性

2 个答案: