중첩 된 녹아웃 템플릿을 사용하여 중첩 된 데이터 표시

Question

녹아웃을 사용하여 접을 수있는 행이있는 테이블을 만들려고합니다. 각 "상위"행은 내 데이터 구조의 최상위 수준에 있으며 각 "하위"행은 구성원 배열의 요소입니다.

서버에서 데이터를 업데이트 할 때 문제가 발생합니다. 데이터는 업데이트되지만 "부모"행의 확인란이 지워지기 때문에 DOM 객체를 대체한다고 말할 수 있습니다. 나는 데이터를 업데이트하기 위해 타이머를 사용하여이 문제를 보여줍니다 바이올린을 가지고

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

내가 대신 {{each}}의 중첩 된 foreach 문을 사용하여을 수정해야한다고 읽었습니다,하지만 나는 것을 얻을 수 없다 작동하려면 위의 바이올린에서 주석 처리 된 섹션을 참조하십시오.

기존 질문에서이 문제를 해결 한 경우 어떻게 처리 할 수 ​​있습니까? 어떤 도움을 주신다면

Answer 1

체크 박스의 값을 저장할 필요가 없기 때문에 체크 박스의 값은 매번 지워집니다. 아래의 바이올린이 당신의 문제를 해결합니까? , 당신은 완전히 모든 타이머 업데이트에 뷰 모델의 모든 데이터를 교체하여 바이올린보고에서

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