javascript - KnockoutJS 未绑定(bind)

Question

我似乎无法让绑定(bind)在我的 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

这些绑定(bind)都不起作用。

我创建了 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

我希望你期待这样的事情

工作 fiddle here

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

查看模型:

 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>