Javascript Girl
  1. Javascript Girl
  3. Knockout: Changer la classe css en fonction de la valeur observable
Intereting Posts
Comment dire à IE un fichier HTML sur mon disque n'est pas un risque de sécurité? Puis-je utiliser les variables angulaires comme source d'une étiquette audio? Javascript vers Coldfusion, en utilisant une variable dans javascript pour interroger CF avec Positionnez dynamiquement Boîte à outils Bootstrap (pour les éléments générés dynamiquement) React.js – Entrée en perte de focus lors du rerendering Récupération de jQuery autocomplete pour fonctionner avec la source PHP Google Maps v3: Comment savoir quand les carreaux de superposition d'un ImageMapType ont fini de charger? Waving text on canvas Puis-je utiliser javascript pour forcer le navigateur à «rincer» les modifications de mise en page en attente? Génération de requêtes multimédias CSS avec javascript ou jQuery Empêcher la soumission d'une entrée et d'une pièce textuelles vierges Comment mettre à jour l'étiquette de p: selectCheckboxMenu sans que le composant soit fermé après l'appel ajax en premieres-pages? Comment le code * entre * la fin de la balise HEAD et avant que la balise BODY ne soit traitée? Toutes les combinaisons valides de n paire de parenthèses Gestion de la liaison des données dans les services AngularJS

Knockout: Changer la classe css en fonction de la valeur observable

J'utilise foreach sur un tableau observable: 

<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 ==>

Comme vous pouvez le voir, je passe la valeur actuelle de disponibilité à la disponibilité de la fonctionCssClass, qui compare la valeur à certaines chaînes prédéfinies. Selon la chaîne correspondante, il renvoie un nom de classe. 

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

C'est mon modèle. Les données proviennent d'une source de données externe. 

 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();

Cependant, cela ne fonctionne pas tel quel. Lorsque la fonction calculée n'est pas commentée, la foreach ne se déroule pas sur les données et la div est vide. Mais je peux voir que viewModel n'est pas vide.

Vous ne pouvez pas calculer la valeur de la valeur de cette manière. Il est préférable d'ajouter ce calculé au modèle de vue de Notification et à utiliser la propriété 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"; }); };

Votre déclaration if n'était pas correcte, donc j'ai corrigé la logique. Voici le violon de travail: http://jsfiddle.net/vyshniakov/Jk7Fd/

Il suffit de faire de la availabilityCssClass une fonction. Comme vous l'avez écrit, ce n'est pas une observation calculée puisqu'il n'a pas de dépendances observables. 

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

La liaison CSS veut un objet littéral avec le nom de la classe CSS en tant que nom de membre et la valeur déperdition vraie ou fausse sur vous voulez supprimer ou ajouter la classe 

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

Edit: Hmm, ils ont changé la liaison css en 2.2;)