敲除：基於可觀察

我使用的foreach可觀察到的陣列上的值變更css類：敲除：基於可觀察

<div id="mainRight" data-bind="foreach: notifications"> 
    <div class="statusRow"> 
     <div class="leftStatusCell"> 
      <div class="leftStatusCellColor" data-bind="css: availabilityCssClass($data.availability)"></div> 
     </div> 
     <div class="topRightStatusCell" data-bind="text: sip"></div> 
     <div class="bottomtRightStatusCell ellipsisSingleline" data-bind="text: note"></div> 
    </div> 
</div> <!== end mainRight ==>

正如你可以看到，我的可用性的電流值傳遞給函數availabilityCssClass，其值進行比較，以一些預定義的字符根據匹配的字符串，它返回一個類名。

self.availabilityCssClass = ko.computed(function (value) { 
    var availability = value; 
    if (availability === "Busy" || "DoNotDisturb" || "BeRightBack") 
     return "leftStatusCellColorOrange"; 
    else if (availability === "Away" || "Offline") 
     return "leftStatusCellColorRed"; 
    else 
     return "leftStatusCellColorGreen"; 
});

這是我的模型。數據來自外部數據源。

function Notification(root, sip, availability, note) { 
    var self = this; 

    self.sip = ko.observable(sip); 
    self.availability = ko.observable(availability); 
    self.note = ko.observable(note); 
}; 

self.notifications = ko.observableArray();

但是，它不起作用。當計算的函數未被註釋掉時，foreach不會迭代數據，而div是空的。但是我可以看到viewModel不是空的。

來源

2012-11-19 mupersan82

你能提供一個小提琴，並描述什麼是行不通的。 –

您正在使用哪個KO版本？ – nemesv

即時通訊使用2.2所以這個功能應該被支持，對吧？ – mupersan82

你不能通過值轉換成這樣的方式計算。這是更好地添加此計算爲Notification視圖模型，並使用self.availability屬性：

function Notification(root, sip, availability, note) { 
    var self = this; 

    self.sip = ko.observable(sip); 
    self.availability = ko.observable(availability); 
    self.note = ko.observable(note); 

    self.availabilityCssClass = ko.computed(function() { 
     var availability = self.availability(); 

     if (["Busy", "DoNotDisturb", "BeRightBack"].indexOf(availability) != -1) return "leftStatusCellColorOrange"; 
     else if (["Away", "Offline"].indexOf(availability) != -1) return "leftStatusCellColorRed"; 
     else return "leftStatusCellColorGreen"; 
    }); 
};

你if說法是不正確的，所以我固定的邏輯。這裏是工作提琴：http://jsfiddle.net/vyshniakov/Jk7Fd/

來源

2012-11-19 12:17:35

太棒了，謝謝！爲什麼我不能像我那樣將值傳遞給計算函數？ if語句有什麼問題？ – mupersan82

我不知道爲什麼，但傳遞值計算不起作用:)。在JavaScript中，你不能以這種方式比較價值。在你的代碼中，如果可用性不是繁忙，那麼'if'將總是返回true。 –

只要注意到每次可用性更改時便會覆蓋註釋值。我怎樣才能避免這種情況？ – mupersan82

CSS的結合要文字與CSS類作爲成員名稱和值對要刪除或添加的類別

data-bind="css: { 'css-class-name': true }"

真或假depeding的名稱對象編輯：嗯，他們已經改變了CSS 2.2結合;）

來源

2012-11-19 12:17:59 Anders

你只需要做出availabilityCssClass功能。正如你寫的那樣，它不是一個可計算的觀察值，因爲它沒有可觀察的依賴關係。

self.availabilityCssClass = function (value) { 
    var availability = value; 
    if (availability === "Busy" || "DoNotDisturb" || "BeRightBack") 
     return "leftStatusCellColorOrange"; 
    else if (availability === "Away" || "Offline") 
     return "leftStatusCellColorRed"; 
    else 
     return "leftStatusCellColorGreen"; 
};

來源

2012-11-19 21:08:43

敲除：基於可觀察

回答

相關問題