używam foreach na obserwowalnym tablicy:Knockout: Zmiana klasy CSS na podstawie wartości obserwowalne
<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 ==>
Jak widać, mijam wartość bieżącą dostępność do availabilityCssClass funkcyjny, który porównuje wartość niektóre predefiniowane ciągi. W zależności od pasującego ciągu zwraca nazwę klasy.
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";
});
To jest mój model. Dane pochodzą z zewnętrznego źródła danych.
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();
Jednak nie działa tak jak jest. Kiedy funkcja obliczana nie jest komentowana, foreach nie przetwarza danych, a element div jest pusty. Ale widzę, że viewModel nie jest pusty.
Czy możesz podać skrzypce i opisać, co nie działa. –
Którą wersję KO używasz? – nemesv
Im przy użyciu 2.2, więc ta funkcja powinna być obsługiwana, prawda? – mupersan82