CODEWITHSUNDEEP
javascriptjqueryhtmlcssember.js
Vítor Martins
Vítor Martins

Reputation: 1440

In Ember how to use a view to change a css property and then view it?

I have a color saved in my db as text (ex: "#FFFFFF") and I want to show it like in this fiddle:

http://jsfiddle.net/rLtb7dc7/

What i have...

HTML:

<span class="colorpreview"> {{view App.ColorView contentBinding="primaryColor"}} random text</span>

View:

App.ColorView = Ember.View.extend({
    tagName: "span",
    classNameBindings: 'colorpreview',

    'colorpreview': function() {
        var colorFromDb = this.content;
        $('.colorpreview').css('background-color',colorFromDb);
    }.property('content')
});

CSS:

.colorpreview{
    width: 10px ;
    height: 10px ;
    border-radius: 10px ;
    background-color: #FFF ;
}

If you need more code or information I'll answer in the comments, thanks in advance ;)

Upvotes: 1

Views: 32

Answers (1)

V&#237;tor Martins
V&#237;tor Martins

Reputation: 1440

I was able to do this by using a helper:

Ember.Handlebars.registerBoundHelper("getStyle", function(o){
    return "background-color:" + o + ";" + "border-radius: 10px; padding: 5px; display: inline-block; vertical-align: middle; border:1px solid black"; 
});

o in this case being the primaryColor I wanted to show.

and then calling it in the HTML:

<span style="{{unbound getStyle primaryColor}}" >  </span>

Upvotes: 1

Related Questions