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'＆gt; px“＆gt;

     

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

     

我想知道实现这些目标的最佳方法是什么   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>

Answer 4

在Ember 2.0中：

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

会起作用。