Phi*_*egg 1 javascript jquery knockout.js
我正在查看Knockouts站点的任务列表示例,并且在了解如何设置特定值时遇到问题.
有一个名为Task的javascript对象.它具有通过分配的'isDone'的布尔属性this.isDone = ko.observable(data.isDone);
我的问题是我不明白如何将true或false的值传递给此属性.没有迹象表明它是在对象的初始创建中传递的,并且javascript文件中使用该值的唯一其他位置是:
self.incompleteTasks = ko.computed(function() {
return ko.utils.arrayFilter(self.tasks(), function(task) {
return !task.isDone()
});
但这仅适用于任务列表底部的总计 - 这可以完全删除,应用程序仍然可以正常工作(当然除了你没有总计).
但是,在标记中,复选框输入正在使用'isDone'值:
<input type="checkbox" data-bind="checked: isDone" />
是否有可能在选中复选框时,复选框值本身 - 这将是真的 - 被传递到'isDone'？
通常,我希望'isDone'需要已经有一个'true'或'false'值与它相关联才能在标记中使用,但是我没看到如何赋值.
这是完整的上下文代码:
function Task(data) {
this.title = ko.observable(data.title);
this.isDone = ko.observable(data.isDone);
}
function TaskListViewModel() {
// Data
var self = this;
self.tasks = ko.observableArray([]);
self.newTaskText = ko.observable();
self.incompleteTasks = ko.computed(function() {
return ko.utils.arrayFilter(self.tasks(), function(task) {
return !task.isDone()
});
});
// Operations
self.addTask = function() {
self.tasks.push(new Task({ title: this.newTaskText() }));
self.newTaskText("");
};
self.removeTask = function(task) { self.tasks.remove(task) };
}
ko.applyBindings(new TaskListViewModel());
......这是标记:
<!DOCTYPE html>
<html>
<head>
<title>Knockout Practice</title>
</head>
<body>
<h3>Tasks</h3>
<form data-bind="submit: addTask">
Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
<button type="submit">Add</button>
</form>
<ul data-bind="foreach: tasks, visible: tasks().length > 0">
<li>
<input type="checkbox" data-bind="checked: isDone" />
<input data-bind="value: title, disable: isDone" />
<a href="#" data-bind="click: $parent.removeTask">Delete</a>
</li>
</ul>
You have <b data-bind="text: incompleteTasks().length"> </b> incomplete task(s)
<span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>
<script type='text/javascript' src='javascript/jquery-1.6.4.js'></script>
<script type='text/javascript' src='javascript/jquery-tmpl.js'></script>
<script type='text/javascript' src='javascript/knockout-2.0.0.js'></script>
<script type='text/javascript' src='javascript/myKnockoutCode.js'></script>
</body>
</html>
该checked绑定确定它是否是真的还是假的松散.这意味着0,空字符串,null,false,NaN和undefined将被视为false.
因此,isDone实际初始化为false 并不重要.
选中或取消选中该复选框后,checked绑定将正确地将其设置为true或false.
| 归档时间： |
|
| 查看次数： |
2046 次 |
| 最近记录： |