3

正如@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

4

3 回答 3

6

该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/

编辑： 我在小提琴中进行了一些更改以添加更多功能，但设置宽度的部分保持不变。

于 2012-10-15T22:14:06.360 回答
1

您的原始解决方案style="{{dynamicStyleAttribute}}"现在可以使用新的绑定属性语法 - http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_bound-attribute-syntax

您需要将 a 附加px到 的值width:300px，并调用Ember.String.htmlSafe('your string')它。

注意还有一些未解决的问题： https ://github.com/emberjs/ember.js/issues/10783 https://github.com/emberjs/ember.js/issues/10870

于 2015-09-15T18:28:17.690 回答
0

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

例如：

在您的 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}}
于 2012-10-15T19:41:38.257 回答