Digamos que tengo,

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

Quiero añadir otra clase a través de un objeto JSON,

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

Esta obra,

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

Pero el problema es que va a agregar dos atributos de la clase. Necesito el cls1 y cls2 clase en principio. Pero necesitan cls3 clase después de algún evento.

  • Puede usted proporcionar un violín que muestra el caso de uso?
  • Yo no veo ningún problema con su ejemplo
InformationsquelleAutor user960567 | 2013-01-10

3 Comentarios

  1. 39

    Debe utilizar css enlace en lugar de attr para esto. Leer más sobre ello en la documentación: http://knockoutjs.com/documentation/css-binding.html.

    Que el código se verá algo como esto:

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

    Aquí está trabajando violín: http://jsfiddle.net/vyshniakov/gKaRF/

    • Jsfiddle es que no me muestra el html,css y js
    • Recientemente han actualizado la interfaz de usuario también tuve ese problema. Tengo que borrar la caché del navegador para este sitio(Presione Ctrl + R).
    • Gracias. funciona..
  2. 14

    El uso de varias clases:

    <span
        class="yourClass"
        data-bind="css: { myClass: (true == true), theirClass: (!true == false), ourClass: true }"
    >Thine Classes</span>
    • Esto me ayudó un montón! Gracias
    • ¿Por qué crees que estás haciendo (true == true) y (!true == false)?
    • esos son sólo afirmaciones. Podría ser algo como css: { ‘activa-clase’: (isSelected == true) }
    • {'active-class': isSelected} que quieres decir. Espero.
    • Seguro. Cualquiera de las sintaxis de trabajo, pero tener == true es algo redundante. Si yo estuviera escrito en una aplicación-no demostrada -, entonces yo estaría escribiendo de la manera que acabo de mencionar.
  3. 7

    Puede utilizar el css vinculante para ello:

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

    Esto se suma el valor de su «clas» de la propiedad a la clase actual de la colección del elemento

    • Agradable, lo necesitas para algo de la línea de css: 'size' + Array.length
    • usted puede crear un calculada propery llamado «sizeClass» que devuelve esta combinación y, a continuación, utilizarlo como una normal de la propiedad en el css de enlace de datos
    • Sí, pero no me gusta marcado decisiones en mi ViewModel, así que, usando el enfoque sugerido era perfecto para mí..
    • NOTA: CLAS NO ES UN ERROR tipográfico, el uso de css: la clase no funciona, tal vez de la clase es una palabra clave reservada?
    • sí, porque KO también tiene un class de unión. Si desea agregar «clase», como el nombre de uno, poner entre comillas como 'class'.

Dejar respuesta

Please enter your comment!
Please enter your name here