使用 foreach 渲染字典

Question

我有一个字典，已经被 WebApi2 序列化，所以键是对象名，值是值。

如何使用 foreach 绑定进行淘汰赛渲染？

我尝试使用$data[0] 作为键，使用$data[1] 作为值，但这不起作用。

<table id="context-data" class="table-striped properties">
    <thead>
    </thead>
    <tbody data-bind="foreach: Properties">
        <tr>
            <th data-bind="text: $data[0]" style="text-align: right"></th>
            <td data-bind="text: $data[1]"></td>
        </tr>
    </tbody>
</table>

Answer 1

foreach 绑定需要一个数组，您可以使用Object.keys method 获取给定对象自己的可枚举属性的数组。

然后您可以使用$data 在您的Properties 对象上显示属性名称和数组索引器语法以获取其值（Properties[$data]）：

<tbody data-bind="foreach: Object.keys(Properties)">
    <tr>
        <th data-bind="text: $data" style="text-align: right"></th>
        <td data-bind="text: $parent.Properties[$data]"></td>
    </tr>
</tbody>

注意：您需要使用$parent 访问foreach 内的Properties。

演示JSFiddle.