knockout.js - 如何通过 knockout 在点击时切换 bool 值？

Question

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

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);

这些电子邮件使用每个数据绑定(bind)来显示:

<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>

基本上，有几封“电子邮件”都具有发件人属性、主题属性、日期属性、标记属性和读取属性。

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

Answer 1

您可以将标记和读取属性设置为可观察对象，然后在 View 模型中创建函数来切换这些属性。

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/

您可以单击“标记”和“读取”行，这将切换每个属性的真/假值。