淘汰赛：根据 observable 的值更改 css 类答案

【问题标题】：Knockout: Change css class based on value of observable淘汰赛：根据 observable 的值更改 css 类
【发布时间】：2012-11-07 08:26:54
【问题描述】：

我在可观察数组上使用 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不是空的。

【问题讨论】：

你能提供一个小提琴，并描述什么不起作用。
你用的是哪个KO版本？
我用的是 2.2，所以应该支持这个功能吧？
该类未根据评估值应用。

标签： javascript css knockout.js

【解决方案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/

【讨论】：

太棒了，谢谢！为什么我不能像我一样将值传递给计算函数？ if 语句有什么问题？
我不知道为什么但是将值传递给计算不起作用:)。在 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(); };

【解决方案2】：

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

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

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

【讨论】：

【解决方案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";
};

【讨论】：