KnockoutJS не является обязательным

Question

Я не могу получить привязку к работе над своим приложением KnockoutJS.

JSFIDDLE ->http://jsfiddle.net/maylortaylor/pfqnkj17/

Вот формат моего JSON (генерируется с использованием <pre data-bind="text: ko.toJSON($root.forms,null,2)"></pre>)

[ 
    { 
    "formTitle": "formTitle", 
    "formDescription": "formDesc", 
    "fieldTemplates": [ 
     { 
     "fieldId": "text1", 
     "title": "title", 
     "description": "description fieldTemplate", 
     "isReq": true 
     }, 
     { 
     "fieldId": "text2", 
     "title": "ttitle22", 
     "description": "description fieldTemplate 2", 
     "isReq": false 
     } 
    ] 
    } 
] 

А вот как я пытаюсь вызвать его на странице

<div id="MiddleColumn"> 
      <input data-bind="textInput: $root.formTitle" type="text" placeholder="Title" class="span8 hideOffFocus input-full large-type"> 
     <input data-bind="textInput: formDescription" type="text" placeholder="Description" class="hideOffFocus input-full"> 
</div 

ни одна из этих привязок не работает.

Я создаю forms объект здесь

var FormModel = function (forms) { 
    var self = this; 

    self.forms = ko.observableArray(ko.utils.arrayMap(forms, function (form) { 
     return { 
      formTitle: form.formTitle, formDescription: form.formDescription, 
      fieldTemplates: ko.observableArray(form.fieldTemplates) }; 
    })); 

}; 

ko.applyBindings(new FormModel(initialData)); 

Answer 1

я надеюсь, что ваши ожидаю что-то вроде этого

Работы скрипки here

Теперь, если вы что-то изменить в текстовых полях в режиме предварительного просмотра вы можете увидеть автоматические обновления, т. е. mapping делает вещи обратно к ко.

вид Модель:

var mapping = { 
     'fieldTemplates': { 
      create: function (options) { 
       return new FormModel(options.data); 
      } 
     } 
    } 

function FormModel(forms) { 
     var self = this; 
     self.forms = ko.observableArray(); 
     ko.mapping.fromJS(forms, mapping, self); 

     // other stuff 

     } 

Вид:

<div id="MiddleColumn"> 
    <input data-bind="textInput: $root.formTitle" type="text" /> 
    <input data-bind="textInput: $root.formDescription" type="text"/><br/> 
    <div data-bind="foreach:$root.fieldTemplates"> 
     <span data-bind="text:fieldId"></span> 
     <span data-bind="text:title"></span> 
     <span data-bind="text:description"></span> 
     <span data-bind="text:isReq"></span> 
     <br/> 
    </div> 
</div>