Ember.js在模板中绑定CSS样式 [英] Ember.js binding a css style in a template

问题描述

这是从Ember 1.8与HTMLBars引擎解决的。

我想在模板中绑定一个CSS样式。
解决方案是什么？

我尝试过：

 < div class =barstyle =width：{{barWidth}} px>< / div> 
  

但DOM元素在呈现之后看起来像这样：

 < div class =barstyle =width：< script id ='metamorph-28-start'type ='text / x-placeholder'> < / script> 5.000000000000002< script 
  

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

显然，在这里我们可以看到，在style属性中添加了metamorph的标签是
...

我想知道用
Ember.js

是最好的方法

---

有一些我还没有得到的。

我有一个模板如下：

 < script type =text / x-handlebarsdata-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> 
  

我在通过我的ArrayProxy内容循环的每个循环...和条宽根据列表中每个项目的值而有所不同。您的解决方案将无法正常工作，因为视图是UL，我需要一个barWidth每个模型项目。而且我不想使用与CSS相关的东西，如width：### px来处理我的模型。

有没有其他优雅的方式来解决我试图做什么？也许会有根本的不同。我非常新的ember.js，并尝试发现最佳实践：）

解决方案

在您的视图看起来像width：100px，然后使用 bind-attr 帮助器将其绑定到您的div ：< div {{bind-attr style =divStyle}}>测试< / div>

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

This is solved since Ember 1.8 with the HTMLBars engine.

I would like to bind a css style in a template. What would be the solution ?

I tried this:

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

but DOM element look like this after its been rendered:

<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">

Obviously here we can see that the tag for metamorph was added within the style attribute...

I'm wondering what is the best way to achieve such things with Ember.js

---

There is something i don't get yet.

I have a template as follow:

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

i'm in a for each loop that loops thru my ArrayProxy content... and the bar width vary depending of the value of each item in the list. Your solution here will not work as the view is the UL and i need a barWidth per model item. and I do not want to polute my Model with css related things like "width: ###px"

Is there any other elegant way to solve what i try to do ? maybe it would be radically different. I'm very new to ember.js and try to discover the best-practices yet:)

解决方案

Set a string on your view that looks like "width: 100px" and then bind it to your div with the bind-attr helper like so: <div {{bind-attr style="divStyle"}}>Test</div>

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

这篇关于Ember.js在模板中绑定CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！