ノックアウト：観測可能

Question

の値に基づいて変更するCSSクラスIは、観察可能なアレイ上のforeachを使用します。

<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が空ではないことがわかります。

Answer 1

このように計算に値を渡すことはできません。 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/

Answer 2

CSSは、あなたのメンバー名としてCSSクラスの名前と値をtrueまたはfalse depedingを持つオブジェクトリテラルは

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

クラスを削除したり、追加したいたいです編集：うーん、彼らは2.2でCSSのバインディングを変更しました;）

Answer 3

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"; 
};