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

Question

自从Ember 1.8使用HTMLBars引擎后,这就解决了.

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

我试过这个:

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

但DOM元素在渲染后看起来像这样:

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

显然,在这里我们可以看到变形的标签被添加到样式属性中...

我想知道用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内容循环...并且条形宽度根据列表中每个项目的值而变化.这里的解决方案不起作用,因为视图是UL,我需要每个模型项目的barWidth.而且我不想用css相关的东西来判断我的模型,例如"width:### px"

有没有其他优雅的方法来解决我尝试做的事情？也许它会完全不同.我是ember.js的新手,并尝试发现最好的做法:)

Answer 1

在视图上设置一个看起来像的字符串"width: 100px",然后使用bind-attr帮助器将其绑定到div,如下所示:<div {{bind-attr style="divStyle"}}>Test</div>

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

Answer 2

为了简化这一切,我为emberjs创建了一个小手柄帮助器,允许您绑定任何样式属性.你可以看一下https://github.com/yderidde/bindstyle-ember-helper

Answer 3

添加未绑定:

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