用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。