如何使这种简单的单向绑定与淘汰赛一起工作? [英] How to get this simple one-way binding with knockout to work?
问题描述
我正在学习淘汰赛，这是我有史以来第一个例子，所以请保持柔和.
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, i.e, 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
这是我的代码:
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内部，因此无法绑定它.
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对象的顶级成员的情况下绑定吗?
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?
我很可能在语法上做错了.
I am most likely doing something wrong with the syntax.
推荐答案
如果不通过rootElement来应用绑定，它将使用window.document.body.但是，如果在head部分中加载了脚本，则此时body不可用.因此，您需要像这样将1.js负载移动到体内:
If you don't pass rootElement to apply bindings, it's going to use window.document.body. However, if you script is loaded in head section, the body is not available at that moment. So you need to move your 1.js loading inside the body like this:
<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>
这篇关于如何使这种简单的单向绑定与淘汰赛一起工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
