knock-out js css classes multiples liaisons

J'ai fais une petite application pour le compte à rebours dans lequel j'ai utilisé knock-out css liaison avec plusieurs classes. Maintenant, le problème est que si je suis en train d'écrire la logique gestionnaire distinct il travaille très bien, mais si vous essayez de mettre en œuvre la même logique en ligne avec css en liant son ne fonctionne pas comme nécessaire.

Version de travail: http://jsfiddle.net/gzejF/3/

<div class="dateTimer" data-bind="timer: startTime, timerOptions: {speed: 1000}">
    <div class="tens">
        <div class="upperTensClock timerLine"></div>
        <div class="lowerTensClock timerLine"></div>
    </div>
    <div class="units">
        <div class="upperClock timerLine"></div>
        <div class="lowerClock timerLine"></div>
    </div>
</div>

Pas de travail version: http://jsfiddle.net/K6m93/

<div class="dateTimer">
<div class="tens">
<div class="upperTensClock" data-bind="css: {
'l1 l2 l3': tens() == 0,
'l3': tens() == 1,
'l2 l3 l7': tens() == 2 || tens() == 3,
'l1 l3 l7': tens() == 4,
'l1 l2 l7': tens() == 5 || tens() == 6,
'l2 l3': tens() == 7,
'l1 l2 l3 l7': tens() == 8 || tens() == 9 
}"></div>
<div class="lowerTensClock" data-bind="css: {
'l4 l5 l6': tens() == 0 || tens() == 6 || tens() == 8,
'l4': tens() == 1 || tens() == 4 || tens() == 7 || tens() == 9,
'l5 l6': tens() == 2,
'l4 l5': tens() == 3 || tens() == 5
}"></div>
</div>
<div class="units">
<div class="upperClock l1 l2 l3 l7" data-bind="css: {
'l1 l2 l3': units() == 0,
'l3': units() == 1,
'l2 l3 l7': units() == 2 || units() == 3,
'l1 l3 l7': units() == 4,
'l1 l2 l7': units() == 5 || units() == 6,
'l2 l3': units() == 7,
'l1 l2 l3 l7': units() == 8 || units() == 9 
}"></div>
<div class="lowerClock l4 l5 l6" data-bind="css: {
'l4 l5 l6': units() == 0 || units() == 6 || units() == 8,
'l4': units() == 1 || units() == 4 || units() == 7 || units() == 9,
'l5 l6': units() == 2,
'l4 l5': units() == 3 || units() == 5
}"></div>
</div>
</div>

Il semble que dans le css de liaison si la condition est vraie, alors son application de la catégorie, mais lors de la vérification de la prochaine déclaration qui est fausse, il supprime la classe ajoutée lors de l'étape précédente. Est-il une solution de contournement pour ce css vérifier parce que beaucoup des instructions de commutation ne sont pas très bon dans le code de travail.

SALUT quel est l'effet que vous souhaitez atteindre? J'ai essayé votre violon, et je vois un peu les boîtes et les frontières changent régulièrement. Pouvez-vous expliquer plus ou me pointer à la version de travail de sorte que nous pouvons voir?
Mise à JOUR: En changeant la façon et la fusion des classes en css de la liaison de son travaille maintenant pour moi. Découvrez ici jsfiddle.net/3RNKD/1

OriginalL'auteur Shobhit Ghai | 2013-10-02

20

J'ai juste besoin de cela aujourd'hui, je préfère la de plusieurs la classe CSS de liaison noté sur la docs.

Vous pouvez définir plusieurs classes CSS à la fois. Par exemple, si votre modèle de vue a une propriété appelée isSevere.
```
<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">
```
Vous pouvez même définir plusieurs classes CSS basé sur la même condition en enveloppant les noms entre guillemets comme:
```
<div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">
```
tout simplement génial.

OriginalL'auteur kzfabi
15

Vous pouvez utiliser une fonction calculée pour obtenir le CSS.
Quelque chose comme ceci:

html:
```
<div class="upperTensClock" data-bind="css: upperTenCSS()"></div>
```
Javascript:
```
self.upperTenCSS = ko.computed(function() {
switch(self.tens()) {
case 0:
return 'l1 l2 l3';
case 1:
return 'l3';
case 2:
case 3:
return 'l2 l3 l7';
case 4:
return 'l1 l3 l7';
case 5:
case 6:
return 'l1 l2 l7';
case 7:                
return 'l2 l3';
case 8:
case 9:
return 'l1 l2 l3 l7';
}
});   
```
je ne suis pas sûr que les œuvres qu'il regarde comme l'class="upperTensClock" est remplacé. Au moins il fait dans mon test
il fonctionne pour moi, le upperTensClock n'est pas remplacé. S'il est remplacé, dans votre cas, vous pouvez modifier la fonction calculée à mettre la upperTensClock classe.
hmmmm bizarre. J'ai ajouté le upperTensClock classe dans mon code et cela a fonctionné mais quand je l'ai mis comme l'attribut de la balise, je n'ai rien qui m'a amené à croire que c'était d'être remplacé. Étrange
votre droit. J'ai été en utilisant la méthode attr pour définir la classe contre la div et il a été remplacé. J'ai changé à l'aide de la css lier et maintenant il fonctionne très bien.
oui, effectivement cela peut être fait par un certain nombre de façons, mais je viens d'essayer de faire cela simplement en css de liaison. En changeant la façon et la fusion des classes de son travail pour moi. Découvrez ici jsfiddle.net/3RNKD/1

OriginalL'auteur leszek.hanusz

Vous devez vous connecter pour publier un commentaire.