Tablo sütunlarını dinamik olarak ko.observableArray öğesinden ayarlayın

Question

ko.observableArray numaralı verilere dayalı bir tablo verisi çıkarıyorum; burada döndürülen sütunlar önceden belirlenmemiş.

benim observableArray self.userData()[0] bir öğenin bir örnek olacaktır:

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

Bu sütunlarda kullanıcı çıkışına seçtiği dayalı her seferinde farklı olurdu. Ben satır ve sütun tekrarlamak foreach kullanabileceğini biliyor

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

ama:

benim çıkışında sütun başlıkları dizisinde mevcut olanı belirleyeceği istiyorum, benim istenen çıkış olacağını bu yüzden observableArray'umda neyin mevcut olduğuna göre dinamik olarak nasıl referans göstereceğime emin değilim.

<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

Sen bunu yapabilir:

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 
}); 

Görünüm:

<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 fiddleBu temel yapıya sahip anda

Umarım yardımcı olur.