Ember.js binding a css style in a template

Question

This is solved since Ember 1.8 with the HTMLBars engine.

I would like to bind a css style in a template. What would be the solution ?

I tr

Answer 1

Add unbound:

<div class="bar" style="width:{{unbound barWidth}}px"></div>

Answer 2

In Ember 2.0:

<div class="bar" style="width:{{barWidth}}px"></div>

will just work.

Answer 3

To simplify all that, I created a tiny handlebars helper for emberjs that allows you to bind any style properties. You can look at https://github.com/yderidde/bindstyle-ember-helper

Answer 4

Set a string on your view that looks like "width: 100px" and then bind it to your div with the bind-attr helper like so: <div {{bind-attr style="divStyle"}}>Test</div>

http://jsfiddle.net/tomwhatmore/rearT/1/