如何让这个简单的单向绑定与knockout一起工作

How to get this simple one-way binding with knockout to work?

本文关键字：绑定 knockout 工作 一起 简单      更新时间：2023-09-26

我正在学习淘汰赛，这是我第一次学习，所以请温柔点。

我只想要一个从模型到文本框的单向绑定，也就是说，模型中的任何内容都必须显示在文本框中。我还不想创建可观察对象。

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

TypeError: c is null

下面是我的代码: html 1. 

<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>
js 1. 

var model = 
{
    friend : 
    {
        firstName : 'Sathyaish',
        lastName : 'Chakravarthy'
    }
};
ko.applyBindings(model);

看起来knockout不能绑定嵌套属性。因为我绑定到的属性不是model对象的直接成员，而是嵌套在model.friend中，所以它不能绑定它。

当然它不能是，我不能有一个层次模型，我只能绑定，如果属性是model对象的顶层成员?

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

如果你不传递rootElement来应用绑定，它将使用window.document.body。但是，如果您的脚本是在head节中加载的，那么此时body是不可用的。所以你需要把1.js加载到body里面，像这样:

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

您将需要使用映射库来做到这一点。当您使用嵌套属性(如类)时，您需要使用映射。查看: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检查一下

相关文章：