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

时间:2012-01-27 13:11:30

标签: ember.js

自从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的新手,并尝试发现最佳实践:)

4 个答案:

答案 0 :(得分:15)

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

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

答案 1 :(得分:14)

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

答案 2 :(得分:11)

添加未绑定:

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

答案 3 :(得分:1)

在Ember 2.0中:

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

会起作用。