Ember.js - 根据对象属性更新 CSS 宽度

正如中提到的@安多罗夫的回答 https://stackoverflow.com/a/32593118/565877，OP的理想代码（<div style="width:{{model.width}}">现在从 Ember 1.10 开始几乎可以正常工作

我是 Ember.js 的新手，我发现很难动态地 改变CSS。这是一个例子来解释我的意思：

var App = Em.Application.create();

App.MyObj=Em.Object.extend({
    objWidth:10
});

App.objController = Ember.ArrayController.create({
    content: [],
  createObj: function(){
      var obj = App.MyObj.create();
      this.pushObject(obj);
  }
});

下面的代码不起作用，但它解释了我的目标。用一个 车把模板，我想完成这个：

{{#each obj in App.objController}}
     <div style="width:{{obj.objWidth}}"></div>
{{/each}}

换句话说，我只想得到的宽度<div>更新 当。。。的时候objWidth属性被改变。

The style财产必须与bindAttr，通过整体风格，不仅仅是其中一个属性，因为它不理解这一点。此属性仅允许您以字符串形式访问样式，针对直接元素。如果您这样定义样式，则无法绑定到样式的属性。

So 这是我的建议 http://jsfiddle.net/schawaska/ftWZ6/：我创建了几个如下所示的“模型”类，实现了一个返回像素宽度的属性：

var WidthEnabledModel = Em.Object.extend({
    width: 100,
    unit: "px",
    widthString: function() {
        return 'width: %@%@'.fmt(this.width, this.unit);
    }.property('width', 'unit')            
});

App.SampleModel = WidthEnabledModel.extend({
    itemName: ''
});

然后，对于集合中的每个项目，我将该属性绑定到style属性：

<script type="text/x-handlebars" data-template-name="sample">
    <div id="sample_area" style="width: 250px;">
    {{#each thing in controller.content}}
      <div class="item" {{bindAttr style="thing.widthString"}}>
          {{thing.itemName}}<br />
          {{thing.widthString}}
      </div>
    {{/each}}
    <div>
</script>

按照我在 jsfiddle 制作的完整代码示例进行操作http://jsfiddle.net/schawaska/ftWZ6/ http://jsfiddle.net/schawaska/ftWZ6/

Edit:我对小提琴做了一些更改以添加更多功能，但设置宽度的部分保持不变。