En una plantilla de manillar de Ember.js, ¿hay alguna manera de tener atributos de clase estáticos y dinámicos?
-
26-10-2019 - |
Pregunta
Usando el ejemplo de la aplicación para hacer ya Overuse, supongamos que quiero un elemento con una clase "TODO" (estática) y una clase "IS-Done" (dinámica):
<div {{bindAttr class="todo isDone"}}>
Other stuff in here
</div>
En este caso, se espera que "Isdone" y "TODO" sean propiedades en mi objeto de vista, que es lo que quiero para "Isdone", pero no para "TODO". Actualmente estoy trabajando en esto agregando una propiedad "TODO" en mi opinión que es igual a una cadena estática "TODO". ¿Hay alguna forma de tener un atributo de clase estática al usar bindattr?
Ejemplo de violín: http://jsfiddle.net/nes4h/4/
Solución
EDITAR:
¡Hemos arreglado esto en Ember!
En una construcción de Master, o después de que se lanza 0.9.6, ahora puede hacer:
<div {{bindAttr class="App.foo:a-bound-class :a-static-class"}}></div>
Respuesta anterior:
Desafortunadamente, no puede tener nombres de clases estáticos y dinámicos cuando se usa bindAttr
.
Sugiero usar una o más propiedades calculadas en su vista para obtener los nombres de clases estáticos y dinámicos.
Apoyar los nombres de clases estáticos y dinámicos sería muy agradable, pero la forma bindAttr
Actualmente funciona, no es posible. bindAttr
No sabe nada sobre el elemento al que se está conectando durante la compilación de plantillas.
Otros consejos
No sé si puedes hacerlo con bindattr, pero el #view
Helper le permite establecer clases estáticas y dinámicas:
{{#view App.TodoView class="todo" classBinding="isDone"}}
inner content
{{/view}}
En Ember Master, se comprometió hoy un cambio para permitir que las clases estáticas se especifiquen dentro de bindAttr
Prependiendo un colon.
https://github.com/emberjs/ember.js/commit/ce385e3294be019215c555511c7f393aebc02e41
Esto puede cambiar antes del próximo lanzamiento, por supuesto, pero este es un problema que el equipo de Ember Core quiere resolver.
En Ember 1.10.0, Bindattr está en desuso. Puede vincular directamente una variable a la clase de div. Aquí la variable de color está vinculada a la clase de un DIV:
<div class="{{color}}"></div>
La línea en línea si el ayudante también se puede usar en estos contextos:
<div class="{{color}} {{if isEnabled 'active' 'disabled'}}"></div>
http://emberjs.com/blog/2015/02/07/ember-1-10-0-releaded.html