web-dev-qa-db-fra.com

Knockout liant la classe CSS à une propriété de modèle observée

Je veux lier une classe divs css à une propriété du modèle de vue comme ceci:

<div id="statusIndicator" data-bind="css: selectedPriority">

Mais cela génère le résultat:

 <div id="statusIndicator" class=" 0 1 2 3">

Voici le modèle de vue:

myViewModel = {
    selectedPriority: ko.observable('High'),
    Company: ko.observable("Bert"),
    Rows: ko.observableArray([
         new row(),
         new row(),
         new row()
    ]),
    Tabs: ['High', 'Medium', 'Low'],

    selectPriority: function (tab) {
        this.selectedPriority(tab);
    }
};

Donc, quand je charge la page qui utilise ce modèle de vue, je veux que la div soit:

<div id="statusIndicator" class="High">

Qu'est-ce que je fais mal?

knockout.js
31
Dave

Pour cette situation, vous pouvez faire:

<div data-bind="attr: { 'class': selectedPriority}">

Le seul inconvénient de cette méthode est qu'elle définira la classe directement plutôt que d'activer ou de désactiver une classe, donc si vous utilisez plusieurs classes, selectedPriority devra contenir la liste complète des classes.

43
RP Niemeyer

Il semble que vous ne puissiez pas définir une classe directement à partir de votre modèle: http://knockoutjs.com/documentation/css-binding.html

Vous ne pouvez pas faire quelque chose comme ça:

 <div data-bind="css: { high: selectedPriority() == 1, medium: selectedPriority() == 2}">
6
NickGreen

Comme indiqué dans les commentaires de @Chris Jaynes, Knockout 2.2. facilite la définition des noms de classe, comme détaillé dans un article de blog de l'auteur de Knockout, Steve Sanderson.

http://blog.stevensanderson.com/2012/10/29/knockout-2-2-0-released/

Selon le message:

Nous avons également fait en sorte que certaines fonctionnalités fonctionnent plus comme si vous aviez toujours pensé qu'elles devraient fonctionner. Par exemple, la liaison css peut désormais attacher des noms de classe CSS générés par programme à des éléments (auparavant, elle se limitait à basculer les noms de classe CSS prédéfinis)

Le billet de blog comprend également un jsfiddle avec lequel vous pouvez jouer pour voir la liaison en action. http://jsfiddle.net/qRmfH/light/

Notez la syntaxe de liaison css dans son exemple, css: chosenTicketCss, qui est un calculé observable qui retourne un nom de classe css:

<p data-bind="visible: chosenTicket, css: chosenTicketCss">
    Excellent choice! Suits you perfectly.
</p>
4
mg1075