Question

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

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

这是我所拥有的，但是当我运行此代码时，文本框不包含模型值，并且控制台报告错误：

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对象的顶级成员，我只能绑定吗？

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

Answer 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>

Answer 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

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

2 个答案: