Databases
StackOverflow2013
Postsdbo
POEmber.js binding a css style in a template
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEmber.js binding a css style in a template
    text
    copied!<h1>This is solved since Ember 1.8 with the HTMLBars engine.</h1> <blockquote> <p>I would like to bind a css style in a template. What would be the solution ?</p> <p>I tried this:</p> <pre><code>&lt;div class="bar" style="width:{{barWidth}}px"&gt;&lt;/div&gt; </code></pre> <p>but DOM element look like this after its been rendered:</p> <pre><code>&lt;div class="bar" style="width:&lt;script id='metamorph-28-start' type='text/x-placeholder'&gt;&lt;/script&gt;5.000000000000002&lt;script </code></pre> <p>id='metamorph-28-end' type='text/x-placeholder'>px"></p> <p>Obviously here we can see that the tag for metamorph was added within the style attribute...</p> <p>I'm wondering what is the best way to achieve such things with Ember.js</p> </blockquote> <hr> <p>There is something i don't get yet.</p> <p>I have a template as follow:</p> <pre><code>&lt;script type="text/x-handlebars" data-template-name="listTemplate"&gt; &lt;ul id="list"&gt; {{#each App.list}} &lt;li {{bindAttr data-item-id="itemId"}}&gt; &lt;div&gt; &lt;span class="label"&gt;{{itemName}}&lt;/span&gt; &lt;div class="barContainer"&gt; &lt;div class="bar" {{bindAttr style="barWidth"}}&gt;&lt;/div&gt; &lt;div class="barCap"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; {{/each}} &lt;/ul&gt; </code></pre> <p></p> <p>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"</p> <p>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:)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload