web-dev-qa-db-fra.com

Comment ajouter une classe dynamique dans knockoutjs?

Disons que oui,

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

Je veux ajouter une autre classe via un objet JSON,

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

Cela marche,

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

Mais le problème est qu'il ajoutera deux attributs de classe. J'ai besoin de la classe cls1 et cls2 au début. Mais besoin de la classe cls3 après un événement.

javascriptknockout.js
28
user960567

Pour cela, vous devez utiliser la liaison css au lieu de attr. En savoir plus à ce sujet dans la documentation: http://knockoutjs.com/documentation/css-binding.html .

Votre code ressemblera à ceci:

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

Voici le violon qui fonctionne: http://jsfiddle.net/vyshniakov/gKaRF/

41
Artem Vyshniakov

en utilisant plusieurs classes:

<span
    class="yourClass"
    data-bind="css: { myClass: (true == true), theirClass: (!true == false), ourClass: true }"
>Thine Classes</span>
14
Cody

Vous pouvez utiliser la liaison css pour ce faire:

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

Cela ajoute la valeur de votre propriété "clas" à la collection de classes actuelle de l'élément

8
vfportero