3

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

[
  {"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纯粹是针对 UI 的,因此让服务器通过网络为我的数据中的每个项目发送它似乎有点愚蠢。

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

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

4

2 回答 2

1

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

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

这会将 Selected 添加到每个项目。尽管如果我没记错的话,并非所有浏览器都支持地图,因此您必须添加支持,您可以使用类似于此处找到的功能来完成此功能... http://www.tutorialspoint.com/javascript /array_map.htm。或者您可以使用 jQuery 的$.each.

于 2012-08-30T00:46:03.437 回答
0

当服务器发送数据时,您可以创建一个userModel(id, userName). 默认情况下,此模型将具有selectedon false。我包含了一个 jsFiddle 以使其更加清晰。

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

于 2012-08-29T23:46:29.500 回答