Ember.js - 基于对象属性更新CSS宽度 [英] Ember.js - Update CSS width based on an object property

问题描述

如 @ 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模板，我想完成这个：

  {{＃每个obj在App.objController}} 
< div style =width：{{obj.objWidth}}>< / DIV> 
 {{/ each}} 
  

换句话说，我只想要有宽度的< div> 更新
当 objWidth 属性更改时。

解决方案

风格属性必须与 bindAttr ，将样式作为一个整体传递，而不仅仅是其中一个属性，因为它不明白。此属性仅允许您以字符串形式访问该样式，以便定位到即时元素。如果你这样定义，就不可能绑定到一个属性。

所以这里是我的sugestion ：我创建了一些类似如下的模型类，实现一个返回宽度（以像素为单位）的属性：

  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 -name = 样品 > 
< div id =sample_areastyle =width：250px;> 
 {{#each thing in controller.content}} 
< div class =item{{bindAttr style =thing.widthString}}> 
 {{thing.itemName}}< br /> 
 {{thing.widthString}} 
< / div> 
 {{/ each}} 
< div> 
< / script> 
  

按照我在jsfiddle的完整代码的示例 >
我在小提琴中做了一些更改以添加更多功能，但设置宽度的部分保持不变。

As mentioned in @andorov's answer, the OP's ideal code (<div style="width:{{model.width}}"> now pretty much just works as of Ember 1.10

I am new to Ember.js, and I am finding it difficult to dynamically change CSS. Here is an example to explain what I mean:

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);
  }
});

The code below doesn't work, but it explains my goal. Using a Handlebars template, I want to accomplish this:

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

In other words, I just want to have the width of the <div> update when the objWidth property is changed.

解决方案

The style property has to be bound with bindAttr, passing the style as a whole, not just one of the properties, as it doesn't understand that. This property only gives you access to the style as a string, targeting the immediate element. It's not possible to bind to a property of the style if you define it like that.

So here's my sugestion: I've created a couple of "model" classes like the following, implementing a property that returns the width in pixels:

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: ''
});

Then, for each item in your collection I'm binding that property to the style attribute:

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

Follow the example with full code I've made at jsfiddle here http://jsfiddle.net/schawaska/ftWZ6/

Edit: I've made some changes in the fiddle to add more feature, but the part to set the width stays the same.

这篇关于Ember.js - 基于对象属性更新CSS宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！