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 tried this:
<div class="bar" style="width:{{barWidth}}px"></div>
but DOM element look like this after its been rendered:
<div class="bar" style="width:<script id='metamorph-28-start' type='text/x-placeholder'></script>5.000000000000002<script
id='metamorph-28-end' type='text/x-placeholder'>px">

Obviously here we can see that the tag for metamorph was added within the style attribute...

I'm wondering what is the best way to achieve such things with Ember.js

There is something i don't get yet.

I have a template as follow:

<script type="text/x-handlebars" data-template-name="listTemplate">
<ul id="list">
    {{#each App.list}}
      <li {{bindAttr data-item-id="itemId"}}>
        <div>
            <span class="label">{{itemName}}</span>
            <div class="barContainer">
              <div class="bar" {{bindAttr style="barWidth"}}></div>   
              <div class="barCap"></div>
            </div>
        </div>
      </li>
    {{/each}}
    </ul>

i'm in a for each loop that loops thru my ArrayProxy content... and the bar width vary depending of the value of each item in the list. Your solution here will not work as the view is the UL and i need a barWidth per model item. and I do not want to polute my Model with css related things like "width: ###px"

Is there any other elegant way to solve what i try to do ? maybe it would be radically different. I'm very new to ember.js and try to discover the best-practices yet:)

Kingpin2k · Accepted Answer · 2014-08-18 17:54:27Z

15

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/

edited Aug 18, 2014 at 17:54

Kingpin2k

47.4k10 gold badges80 silver badges97 bronze badges

answered Jan 27, 2012 at 13:43

Tom Whatmore

1,3279 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Yaniv De Ridder Over a year ago

Thanks for this fast reply however there is still something i don't get.

Yaniv De Ridder Over a year ago

I updated my original question .. I'm not able to answer to my own answer for 7 more hours.

Tom Whatmore Over a year ago

Assuming your model does have the value on it then the solution is for the view to have a method that transforms that value into the appropriate css string.

Yaniv De Ridder Over a year ago

I created an Handlebar Helper for ember.js based on bindAttr called bindStyle. {{bindStyle width="value1" height="value2"}} jsfiddle.net/yderidder/a9HsE

Yaniv De Ridder Over a year ago

This said, I'm not sure it is the best solution... I have the value in my Model but as i said, I do not have one View per <li> but I have one view for the <ul> so if I follow what your suggestion, i would need a function in my View that takes the value in its argument and pass back a string such as "width:###px" but how do i call this function from my template passing the argument ? Or am i missing something here :)

|

Yaniv De Ridder · Accepted Answer · 2012-01-31 13:52:59Z

14

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

answered Jan 31, 2012 at 13:52

Yaniv De Ridder

7831 gold badge7 silver badges13 bronze badges

1 Comment

Emerson Over a year ago

This should now be marked as the correct answer. The original answer provided no longer works with Ember 1.0.

Bogdan M. · Accepted Answer · 2012-03-30 09:01:53Z

11

Add unbound:

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

answered Mar 30, 2012 at 9:01

Bogdan M.

1,1281 gold badge9 silver badges23 bronze badges

2 Comments

Yaniv De Ridder Over a year ago

Well it works but you have to be careful because you don't get automatic binding with the unbound helper.

thekingoftruth Over a year ago

Agreed, the question was regarding keeping the attribute bound, not explicitly unbinding it.

Daniel · Accepted Answer · 2016-02-28 19:51:36Z

1

In Ember 2.0:

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

will just work.

answered Feb 28, 2016 at 19:51

Daniel

18.7k8 gold badges69 silver badges90 bronze badges

Collectives™ on Stack Overflow

Ember.js binding a css style in a template

This is solved since Ember 1.8 with the HTMLBars engine.

4 Answers 4

6 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

This is solved since Ember 1.8 with the HTMLBars engine.

4 Answers 4

6 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related