从 ko.observableArray 动态设置表列

Question

我正在尝试基于 ko.observableArray 输出一个数据表，其中返回的列不是预先确定的。

我的 observableArray self.userData()[0] 中的一个项目样本将是：

Object {
        RowNum: 1, 
        ID: "123", 
        Surname: "Bloggs", 
        Forename: "Joe", 
        Address line 1: "1 Park Lane"
}

根据用户选择输出的内容，这些列每次都会有所不同。

我希望输出中的列标题由数组中存在的内容确定，所以我想要的输出是：

<table>
   <thead>
      <tr>
         <th>RowNum</th>
         <th>ID</th>
         <th>Surname</th>
         <th>Forename</th>
         <th>Address line 1</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>123</td>
         <td>Bloggs</td>
         <td>Joe</td>
         <td>1 Park Lane</td>
      </tr>
      <!-- repeated for each row -->
   </tbody>
</table>

我知道我可以使用foreach 重复行和列，但我不确定如何根据我的observableArray 中的内容动态引用它。

目前我有这个基本结构：

<table>
    <thead> 
        <tr data-bind="foreach: userData [property name] ">
            <th>
               <span data-bind="text: [property name]"></span>
            </th>                   
        </tr>
    </thead>
    <tbody data-bind="foreach: userData">                
        <tr data-bind="foreach: userData [property name]>
            <td data-bind="text: [property value]">                            
            </td>                        
        </tr>
    </tbody>
</table>

Answer 1

你可以这样做：

JS：

var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.columnNames = ko.computed(function () {
        if (self.items().length === 0)
            return [];
        var props = [];
        var obj = self.items()[0];
        for (var name in obj)
            props.push(name);
        return props;


    });

};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push({
    'Name': 'John',
    'Age': 25
});
vm.items.push({
    'Name': 'Morgan',
    'Age': 26
});

查看：

<table>
    <thead>
        <tr data-bind="foreach: columnNames">
            <th> <span data-bind="text: $data"></span>

            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr data-bind="foreach: $parent.columnNames">
            <td data-bind="text: $parent[$data]"></td>
        </tr>
    </tbody>
</table>

See fiddle

希望对你有帮助。