我有一个包含非常基本的“电子邮件”信息的视图模型:
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。关于如何实现这个目标的任何想法?
答案 0 :(得分:3)
您可以将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
行,这将切换每个媒体资源的真/假值。
答案 1 :(得分:1)
您应该将电子邮件属性标记为&#39;通过&#39;点击&#39;可观察并将其绑定在标记中捆绑。
self.toggleFlag = function(item){
item.flagged(!item.flagged());
};
答案 2 :(得分:0)
使用knockout mapping插件,使用包含可观察属性的对象填充可观察数组非常容易。 我想你的电子邮件列表来自服务器电话?如果是这样,可能是json格式或javascript对象...使用映射插件,您将这些对象转换为完全可观察的。