Emberjs computed property in model

Question

I'm trying to use a computed property in a model to render data in the template. Here's a snippet of my model:

App.ApplicationRoute = Ember.Route.extend({
    model: function() {  
    ...
        divStyle: function() {
           return "height:" + this.get('height') + "px; color:"+ this.get('color') +";";
        }.property('height', 'color')
    }
}

and here's a snippet of my template:

{{#each}} <div {{bindAttr style="divStyle"}}</div> {{/each}}

But I'm getting the following error: "Assertion failed: Attributes must be numbers, strings or booleans, not function". I was following this post: Ember.js binding a css style in a template and somehow its not working. Any ideas?

Answer 1

You either need to define it on the model class, not inside of the model hook, or the controller class associated with the route (application).

Answer 2

You don't define the computed property in the model function. You must define computed properties on the controller or the route. See here for more information about computed properties.

---

But as you are trying to calculate the style within an each loop, you need to take a different approach to get the style for each of your items.

I would use an Ember Handlebars Helper like this to set the style.

Helper

Ember.Handlebars.registerBoundHelper("getStyle", function(o){
    return "height: " + o.height + "px;" +
           "width: " + o.width + "px;" +
           "background-color: " + o.color; 
});

Usage

{{#each}}
    <div style="{{unbound getStyle this}}"></div>
{{/each}}

Demo

You can see a working JSBin here. This demo uses an each loop and a model containing style information to create this:

I hope this helps.