Ember.js-基于对象属性更新CSS宽度

如中所述，OP的理想代码（

现在几乎可以在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}}

{{{#App.objController中的每个obj}
{{/每个}}

换句话说，我只想更新

的宽度 更改

objWidth

属性时

---

您是否尝试过创建视图并将其绑定到控制器

例如：

在Javascript中：

App.objView = Ember.View.extend({
    contentBinding : 'App.objController',
    widthBinding : 'content.width'
});

{{#each Ember.App.objController}}
    {{#view Ember.App.objView contentBinding="this"}}
        <div style="width: {{width}};"></div>
    {{/view}}
{{/each}}

在你的把手上：

App.objView = Ember.View.extend({
    contentBinding : 'App.objController',
    widthBinding : 'content.width'
});

{{#each Ember.App.objController}}
    {{#view Ember.App.objView contentBinding="this"}}
        <div style="width: {{width}};"></div>
    {{/view}}
{{/each}}

{{{#each-Ember.App.objController}
{{{#view Ember.App.objView contentBinding=“this”}
{{/view}
{{/每个}}

必须将

样式

属性绑定到

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>

{{{#controller.content中的每件事}
{{thing.itemName}}

{{thing.widthString}}
{{/每个}}

下面是我在JSFIDLE上编写的完整代码示例

编辑：

---

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

您的原始解决方案

style=“{{dynamicStyleAttribute}}”

现在可以使用新的绑定属性语法工作了-

您需要将

px

附加到

width:300px

的值，并在其上调用

Ember.String.htmlSafe（“您的字符串”）

请注意，仍然存在一些未解决的问题：

---

我尝试了这个方法，但似乎不起作用。似乎无法使用手柄将变量插入

style

值。下面是HTML使用您的建议的结果：

style=“width:；”