Knockout.js 2.0.0 -在这个例子中布尔值是如何设置的?

Knockout.js 2.0.0 - How is the Boolean being set in this example?

本文关键字：何设置 设置 布尔值 js Knockout      更新时间：2023-09-26

我正在查看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" />

是否有可能当复选框被选中时，复选框本身的值-这将是true -被传递给'isDone'?

通常情况下，我希望'isDone'需要已经有一个'true'或'false'值与它相关联，以便在标记中使用，但我不知道该值是如何分配的。

下面是context的完整代码: 
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">&nbsp;</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。

相关文章：