如何使这种简单的单向绑定与剔除工作？

Question

I am learning knockout and this is my first ever example of it, so please be gentle. 我正在学习淘汰赛，这是我有史以来第一个例子，所以请保持柔和。

I just want a one-way binding from the model to the textboxes, ie, whatever is in the model must be displayed in the text boxes. 我只想从模型到文本框进行单向绑定，即模型中的任何内容都必须显示在文本框中。 I do not want to create observables yet. 我还不想创建可观察的东西。

Here is what I have, but when I run this code, the text boxes do not contain the model values, and the console reports an error: 这是我所拥有的，但是当我运行此代码时，文本框不包含模型值，并且控制台报告错误：

TypeError: c is null

Here is my code: 这是我的代码：

1.html 1.html

<html>
    <head>
        <meta charset="utf-8"/>
        <script type='text/javascript' src='knockout-3.4.0.js'></script>
        <script type='text/javascript' src='1.js'></script>
    </head>

    <form id = "frm" name = "frm">
        <fieldset>
            <legend>Your friend's basic information</legend>

            <div>
                <label for = "FirstName">First Name</label>
                <input type = "text" name = "FirstName" id = "txtFirstName" data-bind = "value: friend.firstName" />
            </div>

            <div>
                <label for = "LastName">Last Name</label>
                <input type = "text" name = "LastName" id = "txtLastName" data-bind = "value: friend.lastName" />
            </div>
        </fieldset>

    </form>
</html>

1.js 1.js

var model = 
{
    friend : 
    {
        firstName : 'Sathyaish',
        lastName : 'Chakravarthy'
    }
};

ko.applyBindings(model);

It looks like knockout isn't able to bind a nested property. 敲除似乎无法绑定嵌套属性。 Since the property I am binding to isn't directly a member of the model object, but it is instead nested inside model.friend , it isn't able to bind it. 由于我绑定到的属性不是直接作为model对象的成员，而是嵌套在model.friend ，因此无法绑定它。

Surely it can't be that I cannot have a hierarchical model and that I can only bind if the properties are top-level members of the model object? 当然不能不是我没有层次模型，而只能在属性是model对象的顶级成员的情况下绑定吗？

I am most likely doing something wrong with the syntax. 我很可能在语法上做错了。

Answer 1

If you don't pass rootElement to apply bindings, it's going to use window.document.body . 如果您不传递rootElement来应用绑定，它将使用window.document.body 。 However, if you script is loaded in head section, the body is not available at that moment. 但是，如果您的脚本加载在head ，则此时该body不可用。 So you need to move your 1.js loading inside the body like this: 因此，您需要像这样在体内移动1.js加载：

<html>
    <head>
        <meta charset="utf-8"/>
        <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js'></script>

    </head>

    <body>
    <form id = "frm" name = "frm">
        <fieldset>
            <legend>Your friend's basic information</legend>

            <div>
                <label for = "FirstName">First Name</label>
                <input type = "text" name = "FirstName" id = "txtFirstName" data-bind = "value: friend.firstName" />
            </div>

            <div>
                <label for = "LastName">Last Name</label>
                <input type = "text" name = "LastName" id = "txtLastName" data-bind = "value: friend.lastName" />
            </div>
        </fieldset>

    </form>
    <script type='text/javascript' src='1.js'></script>
    </body>
</html>

Answer 2

You will need to use mapping library to do that. 您将需要使用映射库来执行此操作。 When you use nested properties like a class you need to use mapping. 当您使用类似类的嵌套属性时，需要使用映射。 check it out: Plugin Knockout Mapping 签出：插件敲除映射

Your code wil be some like that: 您的代码将是这样的：

var viewModel = function () {
var _vm = null,

init = function () {

    _vm = {
      friend : ko.mapping.fromJS({
        firstName : 'Sathyaish',
        lastName : 'Chakravarthy'
        }),
        change: function(){
        _vm.friend.firstName('first name changed');
        }
    };

    ko.applyBindings(_vm, $('#frm').get(0));
}

return {
    init: init
}

}(); }（）;

i have that scenario all the time. 我一直都有这种情况。 I put in JSFIDDLE check it out 我放入JSFIDDLE 检查一下

如何使这种简单的单向绑定与剔除工作？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-10-29 13:47:53

解决方案2
0 2016-10-29 13:55:34

如何使这种简单的单向绑定与剔除工作？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-10-29 13:47:53

解决方案2 0 2016-10-29 13:55:34

解决方案1
1 已采纳 2016-10-29 13:47:53

解决方案2
0 2016-10-29 13:55:34