從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

我希望它有幫助。