如何在敲擊時點擊布爾值？

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

你應該使電子郵件屬性'標記'可觀察，並將其綁定到'點擊'綁定標記。

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

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

Answer 3

使用敲除映射插件，它是比較容易觀察到的填充陣列，可觀察到含有屬性的對象。 我想你的電子郵件列表來自服務器調用？如果是這樣，比它可能是json格式或JavaScript對象...使用映射插件，您將這些對象轉換爲完全可觀察。