Javascript 淘汰：根据可观察值更改css类

我在可观察阵列上使用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 ==>

这是我的模型。数据来自外部数据源

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不是空的。

您不能以这种方式将值传递到computed。最好将此计算结果添加到

通知

视图模型中，并使用

自可用性

属性：

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

语句不正确，因此我修复了逻辑。下面是工作提示：

CSS绑定需要一个对象文本，其中CSS类的名称作为成员名称，值true或false取决于您要删除或添加的类

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

---

编辑：嗯，他们在2.2；）中更改了css绑定

您只需要将

可用性类

设置为一个函数。正如您所写的，它不是一个计算的可观察对象，因为它没有可观察的依赖关系

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

---

你能提供一个提琴，并描述什么不起作用。你使用的是哪个KO版本？我使用的是2.2，所以这个功能应该得到支持，对吗？这个类不是根据评估值应用的。太棒了，谢谢！为什么我不能像以前那样将值传递给计算函数？if语句有什么问题吗？我不知道为什么，但将值传递给computed不起作用：）。在javascript中，您不能以这种方式比较值。在代码中，当可用性不忙时，“if”将始终返回true。请注意，每次可用性更改时，注释值都会被覆盖。我怎么能避免呢？不应该。您的项目中可能有另一个代码执行此操作，但没有发布。是的，我有以下代码：//添加或更新，其中提供了空值

self.addNotification=function（sip，availability，note）{var existingItem=ko.utils.arrayFirst（self.notifications（），function（item）{return item.sip（）.toLowerCase（）==sip}）；if（existingItem）{existingItem.availability（availability）；existingItem.note（note）；}else{self.notifications.push（new Notification（self，sip，availability，note））；}self.notifications.sort（）；}
self.availabilityCssClass = function (value) {
    var availability = value;
    if (availability === "Busy" || "DoNotDisturb" || "BeRightBack")
        return "leftStatusCellColorOrange";
    else if (availability === "Away" || "Offline")
        return "leftStatusCellColorRed";
    else
        return "leftStatusCellColorGreen";
};