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

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

我想知道最好的方法是如何使用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>

我正在for each循环中遍历数组代理内容...并且根据列表中每个项的值，条形宽度会有所不同。你在这里提供的解决方案行不通，因为视图是UL，而我需要每个模型项的barWidth。我不想用诸如“width：###px”之类的CSS相关内容来污染我的Model。

还有其他优雅的方法来解决我的问题吗？也许会完全不同。我非常新于Ember.js，并试图发现最佳实践：）

- Yaniv De Ridder

Answer 1

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

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

- Tom Whatmore

---

谢谢您的快速回复，但是还有一些我不明白的地方。 - Yaniv De Ridder

我更新了我的原始问题... 我无法回答自己的答案，还需要7个小时。 - Yaniv De Ridder

假设您的模型确实具有该值，则解决方案是视图具有一种方法，将该值转换为适当的CSS字符串。 - Tom Whatmore

我基于bindAttr为ember.js创建了一个Handlebar Helper，名为bindStyle。{{bindStyle width="value1" height="value2"}}http://jsfiddle.net/yderidder/a9HsE/ - Yaniv De Ridder

这样说吧，我不确定这是最好的解决方案... 我在我的模型中有这个值，但正如我所说，我没有每个<li>一个视图，而是为<ul>一个视图，所以如果我按照你的建议去做，我需要在我的视图中编写一个函数，它将获取其参数中的值并返回一个字符串，例如 "width:###px"，但是我该如何从我的模板中调用此函数并传递参数呢？或者我在这里漏掉了什么 :) - Yaniv De Ridder

我无法将更新传播到模板的视图。至少在提供的jsfiddle中无法工作。 - thekingoftruth

Answer 2

为了简化所有内容，我创建了一个小的handlebars辅助程序用于emberjs，它允许您绑定任何样式属性。您可以查看https://github.com/yderidde/bindstyle-ember-helper。

- Yaniv De Ridder

---

这个现在应该标记为正确答案了。原来的答案在Ember 1.0中已经不再适用。 - Emerson

Answer 3

添加未绑定：

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

- Bogdan M.

---

功能正常，但要注意，因为您没有与未绑定的助手自动绑定。 - Yaniv De Ridder

同意，问题是关于保持属性绑定的，而不是显式解除绑定。 - thekingoftruth

Answer 4

在Ember 2.0中：

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

将会正常工作。

- Daniel Kmak