我想在模板中绑定一个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的新手,并尝试发现最佳实践:)
答案 0 :(得分:15)
在您的视图上设置一个类似于"width: 100px"
的字符串,然后使用bind-attr
帮助器将其绑定到您的div,如下所示:<div {{bind-attr style="divStyle"}}>Test</div>
答案 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>
会起作用。