Knockout JS 入门
我目前正在使用 ASP.NET 进行开发，我想开始使用 Knockout JS...基本上我所做的是复制粘贴第一个教程中提供的代码。
所以我将其放入我的 head 中：
<script type="text/javascript">
function() {
// This is a simple *viewmodel* - JavaScript that defines the data and
behavior of your UI
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
this.capitalizeLastName = function() {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
}();
</script>
...以及
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/knockout-2.0.0.js"></script>
在我的 body 中，我放置了
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<p>
First name: <strong data-bind="text: firstName"></strong>
</p>
<p>
Last name: <strong data-bind="text: lastName"></strong>
</p>
<p>
First name:
<input data-bind="value: firstName" /></p>
<p>
Last name:
<input data-bind="value: lastName" /></p>
<p>
Full name: <strong data-bind="text: fullName"></strong>
</p>
<button data-bind="click: capitalizeLastName">
Go caps</button>
代码全部取自 Knockout JS 的教程，但不知何故，这些值没有绑定它们会自动发生——换句话说，它对我不起作用。我在这里错过了什么吗？
I am currently developing using ASP.NET, and I'd like to get started on Knockout JS... Basically what I've done is I've copy-pasted the code provided in the first tutorial.
So I put this into my head:
<script type="text/javascript">
function() {
// This is a simple *viewmodel* - JavaScript that defines the data and
behavior of your UI
function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
this.capitalizeLastName = function() {
var currentVal = this.lastName(); // Read the current value
this.lastName(currentVal.toUpperCase()); // Write back a modified value
};
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
}();
</script>
...along with
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/knockout-2.0.0.js"></script>
In my body I placed
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<p>
First name: <strong data-bind="text: firstName"></strong>
</p>
<p>
Last name: <strong data-bind="text: lastName"></strong>
</p>
<p>
First name:
<input data-bind="value: firstName" /></p>
<p>
Last name:
<input data-bind="value: lastName" /></p>
<p>
Full name: <strong data-bind="text: fullName"></strong>
</p>
<button data-bind="click: capitalizeLastName">
Go caps</button>
The code was all taken from Knockout JS's tutorial, but somehow the values don't bind themselves automatically--in other words it doesn't work for me. Am I missing something here?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在我看来，JavaScript 代码是在 DOM（您的 HTML）渲染之前执行的。您包含在头部的 JavaScript 函数会立即执行。您需要确保仅在页面完全呈现时执行此代码。
您可以使用 jQuery Ready 函数来做到这一点。
It looks to me like you JavaScript code is being executed before the DOM (your HTML) has been rendered. The JavaScript function you have included in the head is executed immediately. You need to ensure that this code is only executed when the page has been fully rendered.
You can do that with the jQuery ready function.
在我看来，您错误地使用了匿名函数包装器。
您需要在代码中添加更多 ( )。
工作示例： http://jsfiddle.net/AlfeG/bZatD/
It's seems to me that You wrongly use anonymous function wrapper.
You need to add more ( ) to code.
Working example: http://jsfiddle.net/AlfeG/bZatD/
如果您不想使用 jQuery，您还可以：
If you didn't want to use jQuery, You could also: