Ember.js - Update CSS width based on an object property

Question

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.

MilkyWayJoe · Accepted Answer · 2012-10-15 23:46:48Z

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.

andorov · Accepted Answer · 2015-09-15 18:28:17Z

1

Your original solution style="{{dynamicStyleAttribute}}" now works, with the new bound attribute syntax - http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_bound-attribute-syntax

You would need to append a px to the value for width:300px, and call Ember.String.htmlSafe('your string') on it as well.

Note that there are still some unresolved issues: https://github.com/emberjs/ember.js/issues/10783 https://github.com/emberjs/ember.js/issues/10870

answered Sep 15, 2015 at 18:28

andorov

4,3463 gold badges42 silver badges52 bronze badges

Comments

castillo.io · Accepted Answer · 2012-10-15 19:41:38Z

0

Have you tried creating a view and binding it to the controller?

For example:

In your Javascript:

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

In your Handlebars:

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

answered Oct 15, 2012 at 19:41

castillo.io

9427 silver badges9 bronze badges

1 Comment

twiz Over a year ago

I tried this, and it didn't seem to work. It seems that you can't insert a variable into the style value using handlebars. Here is what the HTML ends up as using your suggestion:

style="width: <script id='metamorph-6-start' type='text/x-placeholder'></script><script id='metamorph-6-end' type='text/x-placeholder'></script>;"

Collectives™ on Stack Overflow

Ember.js - Update CSS width based on an object property

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related