Нокаута - Отображение массива

Question

Прежде всего, у меня есть JSFiddle представляя именно те результаты, которые мне нужны свершившийся, и она работает: http://jsfiddle.net/etiennenoel/wG9SZ/

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

Итак, мне нужен мой объект JSON для отображения, но этот объект должен находиться внутри функции или viewModel.

Как правило, мой html должен оставаться на том же или близком к нему.

Вот мой JS код, что я пытаюсь сделать:

function appViewModel() { 
    var self = this; 
    self.formData = ko.observableArray(); 
    self.formData.push({"data": 
     [ 
      { 
      "groupName" : "Properties", 
      "content" : 
      [ 
       { 
        "title" : "Calculation Method", 
        "formType" : "select", 
        "selected" : "2", 
        "value" : 
        [ 
         { 
          "title" : "Voltage Drop - Unbalanced", 
          "value" : "1" 
         }, 
         { 
          "title" : "Voltage Drop - Balanced", 
          "value" : "2" 
         } 
        ] 
       }, 

       { 
        "title" : "Tolerance (% V)", 
        "formType" : "textBox", 
        "value" : 0.01 
       }, 

       { 
        "title" : "Calculation Options", 
        "formType" : "checkbox", 
        "value" : 
        [ 
         { 
          "title" : "Flat Start (at Nominal Conditions", 
          "checked" : false 
         } , 
         { 
          "title" : "Assume Line Transposition", 
          "checked" : true 
         } 
        ] 
       }, 

       { 
        "title" : "Adjust Conductor Resistance at", 
        "formType" : "textBox", 
        "disabled" : true, 
        "value" : 77, 
        "appendLabel" : true, 
        "appendLabelText" : "°F"  
       } 
      ] 
      }, 
      { 
      "groupName" : "Properties", 
      "content" : 
      [ 
       { 
        "title" : "Calculation Method", 
        "formType" : "select", 
        "value" : 
        [ 
         { 
          "title" : "Voltage Drop - Unbalanced", 
          "selected" : false 

         }, 
         { 
          "title" : "Voltage Drop - Balanced", 
          "selected" : true 
         } 
        ] 
       }, 

       { 
        "title" : "Tolerance (% V)", 
        "formType" : "textBox", 
        "value" : 0.01 
       }, 

       { 
        "title" : "Calculation Options", 
        "formType" : "checkbox", 
        "value" : 
        [ 
         { 
          "title" : "Flat Start (at Nominal Conditions", 
          "checked" : false 
         } , 
         { 
          "title" : "Assume Line Transposition", 
          "checked" : true 
         } 
        ] 
       }, 

       { 
        "title" : "Adjust Conductor Resistance at", 
        "formType" : "textBox", 
        "disabled" : true, 
        "value" : 77, 
        "appendLabel" : true, 
        "appendLabelText" : "°F"  
       } 
      ] 
      } 
     ] 
    }); 
} 

var viewModel = new appViewModel() 

ko.mapping.fromJS(viewModel.formData) 
ko.applyBindings(viewModel); 

Этот код также доступен здесь: http://jsfiddle.net/etiennenoel/wG9SZ/23/

Теперь он не работает, и я не знаю, почему , Мне действительно нужно, чтобы мой formData находился внутри функции. Проблема в том, что в документации не говорится о том, чтобы сделать что-то подобное ...

Есть ли способ сделать это?

Если нет, существует ли способ для нокаута привязываться к функции и переменной в одно и то же время?

Answer 1

Вы только frogot один уровень связывания:

<div data-bind="foreach: formData"> 
    <div data-bind="foreach: data"> <!-- missing --> 
     <h1 data-bind="text: $data.groupName"></h1> 

See fiddle