Emberjs computed property in model

2
votes

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?

2
javascriptember.jsmodel

2 Answers

4
votes

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:

Screenshot

I hope this helps.

5
votes

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).