ember.js

Ember.js enlazando un estilo css en una plantilla



(4)

Esto se soluciona desde Ember 1.8 con el motor HTMLBars.

Me gustaría enlazar un estilo css en una plantilla. ¿Cuál sería la solución?

Intenté esto:

<div class="bar" style="width:{{barWidth}}px"></div>

pero el elemento DOM tiene este aspecto después de que se haya procesado:

<div class="bar" style="width:<script id=''metamorph-28-start'' type=''text/x-placeholder''></script>5.000000000000002<script

id = ''metamorph-28-end'' type = ''text / x-placeholder''> px ">

Obviamente, aquí podemos ver que la etiqueta para metamorfos se agregó dentro del atributo de estilo ...

Me pregunto cuál es la mejor manera de lograr tales cosas con Ember.js

Hay algo que todavía no entiendo.

Tengo una plantilla de la siguiente manera:

<script type="text/x-handlebars" data-template-name="listTemplate"> <ul id="list"> {{#each App.list}} <li {{bindAttr data-item-id="itemId"}}> <div> <span class="label">{{itemName}}</span> <div class="barContainer"> <div class="bar" {{bindAttr style="barWidth"}}></div> <div class="barCap"></div> </div> </div> </li> {{/each}} </ul>

Estoy en un para cada bucle que recorre mi contenido de ArrayProxy ... y el ancho de la barra varía según el valor de cada elemento de la lista. Su solución aquí no funcionará ya que la vista es la UL y necesito un ancho de barra por elemento del modelo. y no quiero contaminar mi modelo con cosas relacionadas con css como "ancho: ### px"

¿Hay alguna otra forma elegante de resolver lo que trato de hacer? Tal vez sería radicalmente diferente. Soy muy nuevo en ember.js y trato de descubrir las mejores prácticas aún :)

Añadir sin unir:

<div class="bar" style="width:{{unbound barWidth}}px"></div>

En Ember 2.0:

<div class="bar" style="width:{{barWidth}}px"></div>

sólo funcionará.

Establezca una cadena en su vista que se parezca a "width: 100px" y luego únala a su div con el asistente de bind-attr así: <div {{bind-attr style="divStyle"}}>Test</div>

http://jsfiddle.net/tomwhatmore/rearT/1/