knockout.js 将 JSON 数组中的每个对象数据绑定到 <td>答案

【问题标题】：knockout.js data-binding each object in JSON array to a <td>knockout.js 将 JSON 数组中的每个对象数据绑定到 <td>
【发布时间】：2014-01-31 14:54:13
【问题描述】：

所以，假设我有这个 Web 服务，它返回一个序列化为 JSON 的 C# 列表，所以我在客户端返回的 viewmodel 中是一个 JSON 数组：

[
    {"Id": 1, "Name": "John", "Age": 30},
    {"Id": 2, "Name": "Mike", "Age": 25},
    {"Id": 3, "Name": "Lana", "Age": 28},
]

虽然这不是我正在使用的实际数据，但对于示例来说已经足够了。

我试图通过使用 knockout.js 来完成将上述数组（视图模型）中的每个元素数据绑定到内部的 td 标记在我看来是一张桌子。所以，在这个例子中：

<table>
    <tr>
        <td></td> // this would represent John
        <td></td> // this would represent Mike
        <td></td> // this would represent Lana
    </tr>
</table>

重要的是要注意不要只是将元素的属性数据绑定到 td 的属性，例如

<td data-bind="text: vm.Name">

我希望 td 标记以某种方式代表整个 person 元素（对象）。

【问题讨论】：

foreach

标签： json data-binding knockout.js

【解决方案1】：

你也可以在表格的每个循环中使用这样的前置标记

<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

完整的例子是这样的：

<table data-bind="foreach: objects">
    <tr>
        <td>
          <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
        </td>
    </tr>
</table>

这将为您提供一个带有表内对象 JSON 的 pre 标记。我假设值的名称是“对象”，但您可以将其更改为所需的任何名称。

【讨论】：

【解决方案2】：

这个问题的实际答案是在另一个问题中，类似于这个问题，也是我提出的。这是链接：

knockout $data binding to an HTML element

【讨论】：