Comment ajouter une classe dynamique dans knockoutjs?

Disons que j'ai,

<span class="cls1 cls2" data-bind="title: title" ></span>

Je veux ajouter une autre classe via objet JSON,

{ title: 'a', clas: 'cls3' }

Ce travail,

    <span class="cls1 cls2" data-bind="attr:{title: title,'class': 'cls1 cls2'+clas}" ></span>

Mais le problème est qu'il va ajouter deux attributs de classe. J'ai besoin de la lc1 et cls2 classe sur le début. Mais besoin cls3 classe après un certain événement.

  • Pouvez-vous fournir un violon qui illustre le cas d'utilisation?
  • Je ne vois pas de problème avec votre exemple
InformationsquelleAutor user960567 | 2013-01-10
  1. 39

    Vous devez utiliser css de liaison au lieu de attr pour cela. Lire plus à ce sujet dans la documentation: http://knockoutjs.com/documentation/css-binding.html.

    Vous code ressemblera à ceci:

    <span class="cls1 cls2" data-bind="text: title, css: myClass" ></span>

    Voici de travail violon: http://jsfiddle.net/vyshniakov/gKaRF/

    • Jsfiddle n'est pas en me montrant html,css et js
    • Ils ont récemment mis à jour de l'INTERFACE utilisateur, j'ai aussi eu ce genre de problème. Je dois effacer le cache du navigateur pour ce site(Appuyez sur Ctrl + R).
    • Merci. il fonctionne..
    InformationsquelleAutor Artem Vyshniakov
  2. 14

    À l'aide de plusieurs classes:

    <span
    class="yourClass"
    data-bind="css: { myClass: (true == true), theirClass: (!true == false), ourClass: true }"
>Thine Classes</span>
    • Cela m'a aidé un groupe! Merci
    • Pourquoi sur la terre, faites-vous (true == true) et (!true == false)?
    • ce sont juste des affirmations. Il pourrait être quelque chose comme le css: {"active" de classe: (isSelected == true) }
    • {'active-class': isSelected} que tu veux dire. J'ai de l'espoir.
    • Assurez-vous. Soit de la syntaxe du travail, mais avoir == true est plutôt redondant. Si j'avais écrit dans une application (pas démonstratif, alors je voudrais être écrit de la manière que vous venez de mentionner.
    InformationsquelleAutor Cody
  3. 7

    Vous pouvez utiliser le css de liaison pour ce faire:

    <span class="cls1 cls3" data-bind="css: clas"/>

    Cela ajoute de la valeur de votre "clas" de la propriété à la classe en cours de collecte de l'élément

    • Nice, besoin de cela pour quelque chose ligne css: 'size' + Array.length
    • vous pouvez créer un calculées propery appelé "sizeClass" qui renvoie cette combinaison, et ensuite l'utiliser comme une propriété classique dans le css de la liaison de données
    • Oui, mais je n'aime pas le balisage des décisions dans mon ViewModel, donc, en utilisant l'approche proposée a été parfait pour moi..
    • REMARQUE: CLAS n'EST PAS UNE FAUTE de frappe, à l'aide de css: la classe ne fonctionne pas, peut-être que la classe est un mot clé réservé?
    • oui, parce que KO a aussi un class de liaison. Si vous voulez ajouter "classe" comme le nom de l'un, de mettre entre apostrophes comme 'class'.
    InformationsquelleAutor vfportero