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

Question

正如@ andorov的回答中提到的那样,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);
  }
});

下面的代码不起作用,但它解释了我的目标.使用Handlebars模板,我想完成这个:

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

换句话说,我只想<div>在objWidth更改属性时获得更新的宽度.

Answer 1

该style属性必须绑定bindAttr,作为一个整体传递样式,而不仅仅是其中一个属性,因为它不明白.此属性仅允许您以字符串形式访问样式,以直接元素为目标.如果你这样定义它,就不可能绑定到样式的属性.

所以这是我的消化:我已经创建了几个"模型"类,如下所示,实现了一个返回宽度的属性:

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/

编辑: 我在小提琴中做了一些更改以添加更多功能,但设置宽度的部分保持不变.