javascript - 如何使用 knockout 遍历一个对象(不是数组)

Question

我想使用类似于 Knockout foreach 构造的东西来迭代对象的属性。这是我要创建的...

期望的结果

<table>
    <tr>
        <td>Name 1</td>
        <td>8/5/2012</td>
    </tr>
    <tr>
        <td>Name 2</td>
        <td>2/8/2013</td>
    </tr>
</table>

但是，我的模型看起来像这样......

JS

function DataModel(){
    this.data = ko.observableArray([{
                        entityId: 1,
                        props: {
                            name: 'Name 1',
                            lastLogin: '8/5/2012'
                        }
                    },
                    {
                        entityId: 2,
                        props: {
                            name: 'Name 2',
                            lastLogin: '2/8/2013'
                        }
                    }]);
}

var dataModel = new DataModel();
ko.applyBindings(dataModel);

每一行都有一个 entityId 和 props，它本身就是一个对象。此模板不起作用，但我如何更改它以生成上面所需的表格？

编辑:props在这个例子中是 name和 lastLogin ，但我需要一个与 props 中包含的内容无关的解决方案.

我有这个FIDDLE也一样。

HTML

<div data-bind="template: { name: 'template', data: $data }"></div>

<script type="text/html" id="template">
    <table>
        <tr data-bind="foreach: data()">
            <td data-bind="text: entityId"></td>  
        </tr>
    </table> 
</script>

Answer 1

在现代浏览器(或使用适当的 polyfill)中，您可以遍历 Object.keys(obj) (该方法仅返回自己的可枚举属性，这意味着不需要额外的hasOwnProperty 检查):

<table>
  <tbody data-bind="foreach: {data: data, as: '_data'}">
    <tr data-bind="foreach: {data: Object.keys(props), as: '_propkey'}">
      <th data-bind="text: _propkey"></th>
      <td data-bind="text: _data.props[_propkey]"></td>
    </tr>
  </tbody>
</table>

Fiddled .

注意:我只是想看看这是否可行，上面的模板主体比我想在生产中使用的更受污染(或者几个月后回来就像“wtf”)。

自定义绑定(bind)会是更好的选择，但我个人的偏好是使用计算可观察值或 writeable computed observable (后者在使用 json 响应 a-la restful api 时会很方便)。