получение многомерного массива (объекта), наблюдаемого в KnockoutJS

Question

Я создаю приложение с нокаутом и нахожу его очень полезным. Хотя у меня есть проблема с получением наблюдаемого многомерного массива (объекта).

На данный момент я использую следующую структуру:

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 плагин (это правильный подход?) выглядит хорошо во-первых, но после нажатия функции выше у меня есть новый элемент поля, который не наблюдается, просто объект.

Плагин doumentation говорит:

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

Но я не уверен, что это мой случай.

Если у кого-то есть какие-либо идеи, это было бы очень признательно.

Спасибо.

UPD: Нет проблем, чтобы наблюдать 1 и 2 уровня, проблема заключается в том, чтобы идти глубже.

Вот пример initialData:

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

отображение плагин является лучшим способом пойти. Он автоматически преобразует ваши объекты в наблюдаемые и наблюдаемые массивы, поэтому вам не нужно делать это вручную.

Вот простая скрипка, которая может дать вам некоторые указатели: http://jsfiddle.net/jearles/CGh9b/

В этом примере я создаю структуру дерева и их позволяют добавить новую запись. Вы можете видеть, что я могу продолжать добавлять на все более глубокие уровни без проблем, и поскольку имена можно наблюдать, их можно изменить.