Knockout：根据observable的值更改css类 [英] Knockout: Change css class based on value of observable

问题描述

我在一个可观察的数组上使用foreach：

I use foreach on an observable array:

<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，后者比较该值一些预定义的字符串。根据匹配的字符串，它返回一个类名。

As you can see, I pass the current value of availability to the function availabilityCssClass, which compares the value to some predefined strings. Depending on the matching string, it returns a class name.

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

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

This is my model. The data comes from an external data source.

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

However, it doesnt work as is. When the computed function is not commented out, the foreach does not iterate over the data and the div is empty. But I can see that the viewModel is not empty.

推荐答案

你不能以这种方式将值传递给计算器。最好将此计算结果添加到通知视图模型并使用 self.availability 属性：

You cannot pass value into computed in such way. It is better to add this computed to Notification view model and use self.availability property:

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

您的如果声明不正确，所以我修正了逻辑。这是工作小提琴： http://jsfiddle.net/vyshniakov/Jk7Fd/

Your if statement wasn't correct, so I fixed the logic. Here is working fiddle: http://jsfiddle.net/vyshniakov/Jk7Fd/

这篇关于Knockout：根据observable的值更改css类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！