KnockoutJS 不绑定答案

【问题标题】：KnockoutJS not bindingKnockoutJS 不绑定
【发布时间】：2014-12-12 17:39:21
【问题描述】：

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

【问题讨论】：

我不会将此作为 SO 问题发布，因为如果您运行 Web 浏览器的调试器（即 Chrome 开发工具或 Firebug），您自己的代码会显示错误，并且调试器应该足以让您修复问题。另一方面，您似乎希望可观察数组也将对象属性转换为可观察对象，但这不是 KO 的工作原理！
@MatíasFidemraizer 100% 正确。您可以检查 chrome 控制台，您会发现未定义的错误，即绑定中缺少 $root。此外，使用 mapping 将普通数组转换为 observables 。提示：如果您在文本框中进行更改，因为它是不可观察的值不会得到更新

标签： javascript jquery html knockout.js

【解决方案1】：

我希望你期待这样的事情

工作小提琴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>

【讨论】：