如何通过敲除在点击时切换布尔值？答案

【问题标题】：How to toggle boolean value on click with knockout?如何通过敲除在点击时切换布尔值？
【发布时间】：2015-12-02 05:21:38
【问题描述】：

我有一个包含非常基本的“电子邮件”信息的视图模型：

var emailsViewModel = function() {
    var self = this;
    self.emails = ko.observableArray([
        {from: 'From', subject: 'Subject', date: '9/6/2015', flagged: false, read: false},
        {from: 'From', subject: 'Subject', date: '9/6/2015', flagged: false, read: false}
    ]);
}

ko.applyBindings(emailsViewModel);

这些电子邮件使用for each 数据绑定显示：

<div id="email-browser" data-bind="foreach: emails">
    <div class="email" data-bind="css: {unread: read == false}">
        <div class="select"><input type="checkbox"></div>
        <div class="flag"><i class="fa fa-flag" data-bind="css: {flagged: flagged == true}></i></div>
        <div class="from" data-bind="text: from"></div>
        <div class="subject" data-bind="text: subject"></div>
        <div class="date" data-bind="text: date"></div>
    </div>
</div>

所以基本上，有几个“电子邮件”都有一个 from 属性、subject 属性、date 属性、flaged 属性和 read 属性。

我试图弄清楚如何在单击时切换和更新标记和读取属性的布尔真/假值。因此，如果用户要单击带有一类标志的div，它会将对象的布尔值从 false 切换为 true 或将 true 切换为 false。关于如何实现这一目标的任何想法？

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以使您的 flagged 和 read 属性可观察，然后在您的视图模型中创建函数来切换这些属性。

var emailsViewModel = function() {
    var self = this;
    self.emails = ko.observableArray([
        {from: 'From', subject: 'Subject', date: '9/6/2015', flagged: ko.observable(false), read: ko.observable(false)},
        {from: 'From', subject: 'Subject', date: '9/6/2015', flagged: ko.observable(false), read: ko.observable(false)}
    ]);

    self.toggleFlag = function(email){
    email.flagged(!email.flagged());
    };

    self.toggleRead = function(email){
    email.read(!email.read());
    }
}

HTML

<div id="email-browser" data-bind="foreach: emails">
    <div class="email" data-bind="css: {unread: read() == false}">
        <div class="select"><input type="checkbox"></div>
        <div class="flag"><i class="fa fa-flag" data-bind="css: {flagged: flagged == true}"></i></div>
        <div class="from" data-bind="text: from"></div>
        <div class="subject" data-bind="text: subject"></div>
        <div class="date" data-bind="text: date"></div>
            <div class="toggle" data-bind="click: $root.toggleFlag, text: 'Flagged: '+ flagged()"></div>
            <div class="toggle" data-bind="click: $root.toggleRead, text: 'Read: '+read()"></div>
    </div>
</div>

工作示例：http://jsfiddle.net/newuserjs/oLh6u67z/1/

您可以单击Flagged 和Read 行，这将切换每个属性的真/假值。

【讨论】：

非常感谢。做到了。我只需要将我的实际属性放入可观察对象中！我是 Knockout 的新手，非常感谢您的帮助！
只是为了澄清，所以我确切地知道你的代码在做什么，你能帮我一个忙，解释一下这行代码实际上在做什么吗？ email.flagged(!email.flagged());
这一行获取标记的可观察对象的当前值，将其反转，然后将其分配回标记的可观察对象。因此，如果它为真，则为假，如果值为假，则为真。

【解决方案2】：

您应该使电子邮件属性“已标记”可观察，并使用“单击”绑定将其绑定到标记中。

self.toggleFlag = function(item){
    item.flagged(!item.flagged());
};

看我的小提琴http://jsfiddle.net/brainboost/bjfs1a1u/

【讨论】：

【解决方案3】：

使用淘汰映射插件，很容易用包含可观察属性的对象填充可观察数组。我想您的电子邮件列表来自服务器调用？如果是这样，那么它可能是 json 格式或 javascript 对象......使用映射插件，您将这些对象转换为完全可观察的。

【讨论】：