Estoy haciendo una pequeña aplicación para el temporizador de cuenta atrás en la que he utilizado knockout css de unión con múltiples clases. Ahora, el problema es que si estoy escribiendo la lógica en distintos controlador está funcionando bien, pero si tratando de aplicar la misma lógica en línea con css unión no su trabajo como se requiere.

De trabajo versión: 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>

No de trabajo versión: 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>

Parece que en css en línea de unión si la condición es verdadera, entonces su aplicación de la clase, pero cuando la comprobación de la próxima instrucción que es falso que elimina la clase agregó en el paso anterior. Hay alguna solución para este css en línea de verificación debido a que muchas de las sentencias switch no pintan bien en el código de trabajo.

HOLA cuál es el efecto que estás tratando de lograr? Traté de su violín y veo un par de cajas y de las fronteras cambian periódicamente. Se puede explicar más o me apunte a la versión de trabajo para que podamos ver?
ACTUALIZACIÓN: cambiar la forma y la combinación de clases en css la unión de sus ahora trabajan para mí. Echa un vistazo aquí jsfiddle.net/3RNKD/1

OriginalEl autor Shobhit Ghai | 2013-10-02

2 Comentarios

  1. 20

    Sólo necesitaba esto hoy en día, prefiero las múltiples clases de CSS vinculante señalado en el docs.

    Puede establecer varias clases CSS a la vez. Por ejemplo, si su modelo de vista tiene una propiedad llamada isSevere.

    <div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

    Usted puede incluso fijar varias clases CSS basado en la misma condición mediante un ajuste de los nombres entre comillas como:

    <div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">
    simplemente impresionante.

    OriginalEl autor kzfabi

  2. 15

    Puede utilizar una exploración de la función para obtener el CSS.
    Algo como esto:

    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';
    }
    });   
    no estoy seguro de que funciona como se parece a la clase=»upperTensClock» se sustituye. Al menos lo hizo en mi prueba
    a mí me funciona, el upperTensClock no está siendo sustituidos. Si se sustituye en su caso, usted puede modificar la calculada en la función y la upperTensClock clase.
    hmmmm raro. Hice añadir el upperTensClock clase en mi código y funcionó, pero cuando me puse como el atributo de la etiqueta no tengo nada que me llevó a pensar que estaba siendo reemplazado. Extraño
    su derecho. Yo estaba usando el método attr para establecer la clase contra el div y estaba reemplazando. He cambiado al uso de la css se unen y ahora funciona bien.
    sí, de hecho, esto puede hacerse de varias maneras, pero yo sólo estaba tratando de salir a hacer esto por sólo css en línea de unión. Al cambiar la forma y la combinación de clases que ahora trabajan para mí. Echa un vistazo aquí jsfiddle.net/3RNKD/1

    OriginalEl autor leszek.hanusz

Dejar respuesta

Please enter your comment!
Please enter your name here