如何让这个简单的单向绑定与淘汰赛工作？答案

【问题标题】：How to get this simple one-way binding with knockout to work?如何让这个简单的单向绑定与淘汰赛工作？
【发布时间】：2016-10-31 20:32:38
【问题描述】：

我正在学习淘汰赛，这是我的第一个例子，所以请温柔。

我只想要从模型到文本框的单向绑定，即模型中的任何内容都必须显示在文本框中。我还不想创建 observables。

这是我的，但是当我运行这段代码时，文本框不包含模型值，控制台报错：

TypeError: c is null

这是我的代码：

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

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

ko.applyBindings(model);

看起来淘汰赛无法绑定嵌套属性。由于我要绑定的属性不是model 对象的直接成员，而是嵌套在model.friend 中，因此无法绑定它。

当然不可能我不能有一个层次模型，并且我只能在属性是model 对象的顶级成员时才能绑定？

我很可能在语法上做错了什么。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

如果您不通过rootElement 来应用绑定，它将使用window.document.body。但是，如果您的脚本是在 head 部分中加载的，则 body 此时不可用。所以你需要像这样移动你的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>

【讨论】：

非常感谢。在绿色检查前 4 分钟。 :-)
@WaterCoolrv2，不客气。现在应该可以接受了）

【解决方案2】：

您需要使用映射库来执行此操作。当您使用像类这样的嵌套属性时，您需要使用映射。看看：Plugin Knockout Mapping

你的代码会是这样的：

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
}

}();

我一直都有这种情况。我输入了 JSFIDDLE check it out

【讨论】：

没有那个插件对我来说它工作得很好。我希望一个严肃的框架不会被模型层次结构所困扰。
我想你可能有一点。我在这个问题 (stackoverflow.com/q/40325541/303685) 中遇到了障碍，可能需要映射，但我不确定。
嗨！尝试像我说的那样使用映射插件以及您尝试修改属性的方式。它需要在 parenteses 中： property("value")