KnockoutJS not binding

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

我希望你期待这样的东西

在这里工作小提琴

现在，如果您在预览中的文本框中更改某些内容，您可以看到自动更新mapping即确实使事情恢复到ko方式。

查看型号 ：

 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>