Ember.js 在模板中绑定(bind) css 样式

Question

自 Ember 1.8 以来，这个问题已通过 HTMLBars 引擎解决。

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

<小时/>

有件事我还没有明白。

我有一个模板如下:

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

我处于循环遍历我的 ArrayProxy 内容的 for every 循环中...并且条形宽度根据列表中每个项目的值而变化。您此处的解决方案将不起作用，因为 View 是 UL，并且我需要每个模型项的 barWidth。我不想用 css 相关的东西污染我的模型，比如“width: ###px”

还有其他优雅的方法来解决我尝试做的事情吗？也许情况会完全不同。我对 ember.js 非常陌生，并尝试发现最佳实践:)

Answer 1

在 View 上设置一个类似于 "width: 100px" 的字符串然后使用 bind-attr 将其绑定(bind)到您的 div像这样的助手:<div {{bind-attr style="divStyle"}}>Test</div>

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