KnockoutJS - 根據變量將對象綁定到表格

Question

我想使用Knockout將對象映射到表格。首先，我會告訴你我的對象：

function tableViewModel() { 
    var self = this;  
    self.data = ko.observableArray(); 

self.data.push(
    { 
     "Warnings": { 
      "numbers": 30, 
      "content": [ 
       { 
       "number" : 3001, 
       "description" : "There may be a problem with the device you are using if you use the default profile" 
       }, 
       { 
       "number" : 3002, 
       "description" : "There may be a problem with the device you are using if you don't use the default profile" 
       } 
      ] 
     }, 
     "Errors": { 
      "numbers": 20, 
      "content": [ 
       { 
       "number": 1000, 
       "description": "No network is loaded" 
       }, 
       { 
       "number": 1000, 
       "description": "No network is loaded" 
       } 
      ] 
     } 
    } 
); 

    self.dataTitle = ko.observable("Warnings")    
} 

ko.applyBindings(tableViewModel()); 

該對象包含兩個「對象」，警告和錯誤。我希望能夠在淘汰賽中根據變量（在這種情況下，在變量dataTitle上）僅顯示警告的內容（如果dataTitle ==「Warnings」）或錯誤的內容。

基本上，我希望它查找與dataTitle的內容對應的對象。

我想實現這樣的事情，但oviously它不工作：

<table class="table table-hover" data-bind="foreach: data"> 
    <thead> 
     <tr> 
      <th style="width:100px">Numero</th> 
      <th>Description</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: data[dataTitle].content"> <!-- This line is not giving expected results --> 
     <tr> 
      <td data-bind="text: $data.number"></td> 
      <td data-bind="text: $data.description"></td> 
     </tr> 
    </tbody> 
</table> 

這裏有一個代表的jsfiddle問題：http://jsfiddle.net/etiennenoel/bqcMR/

我的問題是：有沒有辦法使用KnockoutJS來做那件事還是需要多少？

Answer 1

好吧，你可以把表成模板，如果你只希望有它在你的頁面一次，但這個工程：

<tbody data-bind="visible: $root.dataTitle() === 'Warnings', foreach: $data.Warnings.content"> 
    <tr> 
     <td data-bind="text: number"></td> 
     <td data-bind="text: description"></td> 
    </tr> 
</tbody> 
<tbody data-bind="visible: $root.dataTitle() === 'Errors', foreach: $data.Errors.content"> 
    <tr> 
     <td data-bind="text: number"></td> 
     <td data-bind="text: description"></td> 
    </tr> 
</tbody> 

你已經基本上得到了一個表中的每個部分，只顯示你想要的那個。

我對視圖模型做了一些其他的改變，同時試圖讓這個工作，我不知道他們是否需要。請參閱fiddle。