使用嵌套的挖空模板來顯示嵌套的數據

Question

我想使用挖空使可摺疊的行的表。每個「父」行都存在於我的數據結構的頂層，每個「子」行都是成員數組的一個元素。

當我從服務器更新數據時出現問題。數據更新，但我可以告訴它取代我的DOM對象，因爲「父」行中的複選框正在清除。我有證明這個問題提琴，使用定時器來更新數據：

http://jsfiddle.net/jdlogicman/m2LWk/

我已閱讀，使用嵌套的foreach，而不是{{each}}應該修復它，但我不能得到那個工作 - 請參閱上述提琴中的註釋部分。

如果任何現有的問題解決這個問題，我不知道如何。任何幫助表示讚賞

Answer 1

您沒有存儲複選框的值，因此它每次都會被清除。下面的小提琴能解決你的問題嗎？

http://jsfiddle.net/unklefolk/RYqTT/

<table> 
    <thead> 
     <th class="checkbox_th"/> 
     <th class="name_th" align="left">Sample</th> 
     <th class="status_th" align="left">Status</th> 
    </thead> 
    <tbody data-bind="template: {name: 'sampleRowTemplate', foreach: samples}"></tbody> 
    <script type="text/x-jquery-tmpl" id="sampleRowTemplate"> 
     <tr> 
      <td><input type="checkbox" name="select_sample" data-bind="checked: is_checked"/></td> 
      <td><span data-bind='text: sample_name'/> The checkbox =<span data-bind="text:is_checked"/></td> 
      <td><span data-bind='text: ""'/><td/> 
      </tr> 
       {{each sample_runs()}} 
       <tr> 
       <td/> 
       <td><span data-bind='text: $value.name'/></td> 
       <td><span data-bind='text: $value.status'/></td> 
      </tr> 
       {{/each}} 
       <!-- 
       <script type="text/x-jquery-tmpl" id="sampleRunTemplate"> 
       <td/> 
       <td>${name}</td> 
       <td>${status}</td> 
      </script> 
       <tr data-bind="template: {name: 'sampleRunTemplate', foreach: sample_runs }"></tr> 
       --> 

      </script> 
      </table>    


var mapping = { 
    'samples': { 
     key: function(item) { 
      return ko.utils.unwrapObservable(item.id); 
     }, 
     'sample_runs': { 
      key: function(item) { 
       return ko.utils.unwrapObservable(item.id); 
      } 
     } 
    } 
}; 

var data = {}; 
data.samples = [{ 
    id: "s1", 
    sample_name: "AR008", 
    is_checked: false,  
    sample_runs: [ 
     { 
     id: "rs1", 
     name: "run1", 
     status: "done"}]}]; 
var viewModel = ko.mapping.fromJS(data, mapping); 
ko.applyBindings(viewModel); 

// update the data every 2 seconds 
var i = 0; 
setInterval(function() { 
    var data = {}; 
    data.samples = [{ 
     id: "s1", 
     sample_name: "AR008" + i, 
     sample_runs: [ 
      { 
      id: "rs1", 
      name: "run" + i, 
      status: "done" + i}]}]; 
    // is this right? updateFromJS is deprecated 
    viewModel = ko.mapping.fromJS(data, viewModel); 
    i++; 
}, 2000);