KnockoutJS에서 관찰 가능한 다차원 배열 (객체)

Question

나는 Knockout으로 응용 프로그램을 구축하고 있으며 매우 유용하다고 생각합니다. 비록 다차원 배열 (객체)을 관찰 할 수있는 문제가 있습니다. 순간

나는 다음과 같은 구조를 사용하고 있습니다 : 그것은 잘 작동

self.form = ko.observableArray(ko.utils.arrayMap(initialData, function(section) { 
     var result = { 
      name : section.name, 
      code : section.code, 
      type : section.type, 
      fields: ko.observableArray(section.fields) 
     }; 
     return result; 
    })); 

을,하지만 난 initialData 두 개 이상의 수준이면이 작업을 얻을 수 없습니다. 나는

self.form = ko.observableArray(ko.utils.arrayMap(initialData, function(block) { 
     var result = { 
      name : block.name, 
      code : block.code, 
      type : block.type, 
      sections: ko.observableArray(ko.utils.arrayMap(block.sections, function(section) { 
       var result = { 
        name : section.name, 
        code : section.code, 
        type : section.type, 
        fields: ko.observableArray(section.fields) 
       }; 
       return result; 
      })) 
     }; 
     return result; 
    })); 

마지막 배열 구조가 좋아 보인다 같은 시도했지만 녹아웃 나는 부분 배열에 푸시를하고있는 중이 야 때 업데이트 DOM하지 않습니다

self.addField = function(section) { 
     field = { 
      code: uid(), 
      name: "New Field", 
      value: '', 
      type: section.type 
     }; 
     section.fields.push(field); 
    }; 

나는 또한 knockout.mapping을 시도했다. js plugin (올바른 접근법인가?)은 우선 좋아 보인다. 그러나 위의 함수를 밀어 넣은 후에는 필자의 새로운 필드 요소를 관찰 할 수 없다.

// Every time data is received from the server: 
ko.mapping.fromJS(data, viewModel); 

하지만 내 경우는 것을 확실하지 않다 :

플러그인 doumentation는 말한다.

누구나 아이디어가 있다면 크게 환영 할 것입니다.

감사합니다.

UPD : 1 레벨과 2 레벨을 관찰 가능하게 만드는 것은 문제가되지 않지만 문제는 더 심각해집니다.

var blocks = [ 
    { 
     "name" : "", 
     "sections" : [ 
      { 
       "name" : "Section 1", 
       "fields" : [ 
        { 
         "name" : "Field A", 
         "type" : "checkbox", 
         "code" : uid() 
        } 
       ] 
      } 
     ] 
    } 
]; 

HTML

<div data-bind='template: { name: tpl-form-field-checkbox, foreach: fields }'></div> 
<button class="btn addField" data-bind="click: $root.addField">Add</button> 

<script type="text/html" id="tpl-form-field-checkbox"> 
    <input type="text" name="" value="<%= name %>" /> <br/> 
</script> 

Answer 1

매핑 플러그인이 갈 수있는 가장 좋은 방법은 다음과 같습니다

는 initialData의 예입니다. 객체를 observables 및 observableArrays에 자동으로 매핑하므로 수동으로 수행 할 필요가 없습니다. 여기

는 당신에게 약간 포인터를 줄 수있는 간단한 바이올린입니다 : http://jsfiddle.net/jearles/CGh9b/

이 예에서 나는 트리 구조를 생성하고 당신이 새 항목을 추가 할 수 있습니다. 점점 더 깊은 수준에서 아무런 문제없이 계속 추가 할 수 있다는 것을 알 수 있습니다. 이름을 관찰 할 수 있기 때문에 변경할 수 있습니다.