Dynamic CSS in KO

by vyshniakov

HTML

<div id="mainRight" data-bind="foreach: notifications">
        <div class="statusRow">
            <div class="leftStatusCell">
                <div class="leftStatusCellColor" data-bind="css: availabilityCssClass">
                test</div>
            </div>
            <div class="topRightStatusCell" data-bind="text: sip"></div>
            <div class="bottomtRightStatusCell ellipsisSingleline" data-bind="text: note"></div>
        </div>
    </div>

CSS

.leftStatusCellColorOrange{
    color: orange;
}
.leftStatusCellColorRed{
    color: red;
}
.leftStatusCellColorGreen{
    color: green;
}

JavaScript

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

function ViewModel() {
    var self = this;

    self.notifications = ko.observableArray([new Notification(1, 2, "Busy", "Note 1"), new Notification(6, 5, "Away", "Note 2")]);
}


ko.applyBindings(new ViewModel());