6

監視可能な配列で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が空ではないことがわかります。

4

3 に答える 3

4

このような方法で計算に値を渡すことはできません。この計算されたものを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-19T12:17:35.017 に答える
1

関数を作成するだけです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-19T21:08:43.530 に答える
0

CSSバインディングでは、CSSクラスの名前をメンバー名として持つオブジェクトリテラルと、クラスを削除または追加する際の値trueまたはfalseが必要です。

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

編集：うーん、彼らは2.2でcssバインディングを変更しました;）

于 2012-11-19T12:17:59.723 に答える