Question

我正在查看Knockouts网站的任务列表示例，并且在了解如何设置特定值时遇到问题。

创建了一个名为Task的javascript对象。它具有通过this.isDone = ko.observable(data.isDone);

分配的'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'值，但我看不到如何赋值。< / p>

以下是完整的上下文代码：

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>

Answer 1

checked绑定确定它是松散还是假。这意味着0，空字符串，null，false，NaN和undefined将被视为false。

因此，将isDone实际初始化为false并不重要。

选中或取消选中该复选框后，checked绑定会将其正确设置为true或false。

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

1 个答案: