Bind-attr syntax inline css style

Design
1

What is the syntax for binding the value of a style attribute within a handlebars template?

imagine I wanted to do something like this

<div style="background-color:{{ fillcolor }};">My Fill Color</div>

And in the controller was set

fillcolor: "#FF000;"

Template would render this to the DOM:

<div style="background-color:#FF000;">My Fill Color</div>

I think the metamorph tags mess up the above. But I am not quite sure the the bind-attr syntax in this case.

<div {{bind-attr style=?? }}>My Fill Color</div>

Do I have to create a computed property that returns the whole string for the style value?

background-color:#FF000;

Or is there a more direct way to do this? Perhaps a handlebars helper?

I should also add I am trying to do this within a component within Ember App Kit.

2

To answer my own question. One way is via computed property.

fillcolor: "#FF0000", 

fillcolorspan: function() {
    return Ember.String.htmlSafe('<span style="background-color:' + this.get('fillcolor') + ';"> Color </span>');
}.property('fillcolor'),

and then in the template just put

{{fillcolorspan}}
3

This is better than compiling HTML yourself:

Template:

<div {{bind-attr style=fillStyle}}>My Fill Color</div>

Controller:

fillColor: '#ff0000',
fillStyle: function() {
  return 'background-color:'+this.get('fillColor');
}.property('fillColor')
4

Thanks. That was what I was wondering about. So what about multiple properties in the style attribute?. I presume it is this

fillColor: '#ff0000',
borderColor: '#000000',

fillStyle: function() {
  return 'background-color:'+this.get('fillColor')+';border:1px solid '+this.get('borderColor');
}.property('fillColor', 'borderColor')

Do I need to insert the semi colons or does ember do that?

5

Exactly. Yes, you need to include semicolons yourself. Ember simply binds the value of the property to the DOM element’s style property

6

Can you advise me on my more complex situation? I have a stackoverflow question describing it in detail. What I need is a place to create a computed property which uses nested data.

7

@ggstuart You might be able to do some of this with a component.

I am not completely clear on what exactly you are specifically trying to do. But you could create a computed style and then bind that a div inside your component.

Here is an example that might be useful for you

http://emberjs.jsbin.com/xafot/1/

Note also the classNames bindings you can create arbitrary class names like isLeft isRight, etc. That is personally how I would deal with the 'left_or_right" thing you are doing.

When you declare your component inside a template somewhere you could bind these values to values set in the component somewhere.

Hope this helps.

If you could try making a JSBin that illustrates what you want to do I perhaps can help further.

8

Related resource: https://github.com/instructure/ic-styled

1 Like
9

I’ve used this Handlebars helper to bind inline styles: bind-style-ember-helper. Works well, and supports live-updating values.

Note: This is a fork of an older helper. I updated it for Ember 1.3, and changed the way it handles units (to match jQuery).

2 Likes
10

Thanks, this helped me

11

Very helpful! Thanks!

12

Is it possible to send a parameter to the computed property?

What I actually need is instead of directy binding with data i need to modify the data then bind to it…

13

With Ember 1.11 a deprecation warning was added, .htmlSafe(); is needed.

In my component.js, I have a computed property that looks like the following (ES6):

myStyle: Ember.computed('count', function() {
  let width = 100 * this.get('count');
  style = 'width: ${width}px\;';
  return style.htmlSafe();
})

In my template.hbs, I have the following:

<div {{bind-attr style=myStyle}}>
  {{!-- More markup --}}
</div>

Here is a link to the deprecation warning.