En una plantilla de manillar de Ember.js, ¿hay alguna manera de tener atributos de clase estáticos y dinámicos?

StackOverflow https://stackoverflow.com/questions/8807783

  •  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/

¿Fue útil?

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top