ember.js - ember - Peinando el enlace de clase condicional con clase existente

ember onclick

Question

Estoy notando un problema con los enlaces de atributos condicionales cuando intento combinarlos con una clase regular en el mismo elemento. Aquí está el marcado de manubrios que estoy intentando:

<a href="#" class="button" {{bindAttr class="isDirty:dirty:clean"}} {{action save}}>Save</a>

Lo que espero que se genere es:

<a href="#" class="button clean" data-bindattr-3="3" data-ember-action="4">Save</a>

Pero lo que realmente se genera es:

<a href="#" class="button" data-bindattr-3="3" data-ember-action="4">Save</a>

Cuando modifico el modelo, genera correctamente la clase sucia:

<a href="#" class="button dirty" data-bindattr-3="3" data-ember-action="4">Save</a>

Si intento mover la clase después del enlace, generará la clase condicional en lugar de la declarada:

<a href="#" {{bindAttr class="isDirty:dirty:clean"}} class="button" {{action save}}>Save</a>

Genera la clase de botón condicional pero no botón:

<a href="#" class="clean" data-bindattr-3="3" data-ember-action="4">Save</a>

Lo que quiero es que genere tanto la clase declarada combinada como la clase condicional usando solo manubrios (sin tener que crear una vista). Hay otra manera de hacer esto?

Answer 1

A partir de Ember 1.11 puede usar inline-if-syntax

<a href="#" class="button {{if isDirty ''dirty'' ''clean''}}" {{action save}}>
  Save
</a>

Answer 2

En las guías de plantilla , describe una forma de combinar clases estáticas y vinculadas para un elemento:

Si necesita un elemento para tener una combinación de clases estáticas y enlazadas, debe incluir la clase estática en la lista de propiedades enlazadas, con el prefijo de dos puntos.

En tu caso, harías algo como esto:

<a href="#" {{bindAttr class=":button isDirty:dirty:clean"}} {{action save}}>Save</a>

Aquí hay un ejemplo de trabajo http://jsbin.com/ixupad/82/edit