CODEWITHSUNDEEP
ember.js
fvisticot
fvisticot

Reputation: 8536

Updating partial style content

I would like to do the following handlebar script:

The color:{{object.labelColor}} seems not working (Cf. other post).

One solution seems to bind the complete style attribute on the "javascript side" but I would like to avoid managing the "fixed" part of the style (text-align:left) on that side.

Is there a solution to make something similar to my sample code (dynamic part on the js side,fixed part on the html view) ? 

<div class="label" style="color:{{object.labelColor}};text-align:left">{{object.name}}</div>

Upvotes: 1

Views: 341

Answers (2)

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

If you have to use styles instead of classes, and want to change only a portion of the style strings at the time, one alternative would be using $.css, applying the style changes you want. For example:

<script type="text/x-handlebars">
  <h1>App</h1>
  {{view App.SomeView}}
</script>

<script type="text/x-handlebars" data-template-name="some-view">
  <div style="color:#00F;text-align:left">
    Some View<br />
    <button {{action changeColor on="click"}}>Change Color</button>
  </div>
</script>

<script type="text/javascript">

App = Em.Application.create();

App.SomeView = Em.View.extend({
  templateName: 'some-view',
  changeColor: function(e) {
    console.log('changing color');
    this.$('div').css('color', '#F00');
  }
});

</script>

In the script above I'm using jQuery's css function to change the color attribute whatever elements my selector returns from within SomeView instance (in this case as I only have one div, I'm using the element as a selector). There are other (and likely better) ways to do this, but I hope this helps.

The problem with this solution as it is, is that you can't keep the state of the style attribute as it's not bound to any property, that's why I think binding classes would be better in the long run.

Upvotes: 0

Shane Davis
Shane Davis

Reputation: 952

You could use 'classNameBindings', and define a set of css rules to the corresponding classes.

Js

Ember.View.create({
 classNameBindings: ['isUrgent'] // array of class names
 isUrgent: true //conditional to set class name
});

css

.is-urgent{
 background-color: #356aa0;
}

Resource

http://emberjs.com/api/classes/Ember.ContainerView.html#property_classNameBindings

Upvotes: 3

Related Questions