これは、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 のタグがスタイル属性内に追加されたことがわかります...

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>