Question

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

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>

所以基本上，有几个“电子邮件”都有来自属性，主题属性，日期属性，标记属性和读取属性。

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

Answer 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行，这将切换每个媒体资源的真/假值。

Answer 2

您应该将电子邮件属性标记为＆＃39;通过＆＃39;点击＆＃39;可观察并将其绑定在标记中捆绑。

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

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

Answer 3

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

如何在点击敲击时切换布尔值？

3 个答案: