Question

我在一个可观察的数组上使用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

你只需要使availabilityCssClass成为一个功能。正如你所写的那样，它不是一个计算的observable，因为它没有可观察的依赖性。

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

Answer 3

CSS绑定需要一个具有CSS类名称的对象文字作为成员名称，并且值为true或false，取决于您要删除或添加类

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

编辑：嗯，他们已经改变了2.2中的css绑定;）

Knockout：根据observable的值更改css类

3 个答案: