Where do I calculate my style strings in ember.js? <p>I have an ember.js app</p> <pre><code>var App = Ember.Application.create({ LOG_TRANSITIONS: true }); App.ApplicationAdapter = DS.FixtureAdapter; //==============================ROUTER============================== App.Router.map(function() { this.resource('organisation', {path: '/:org_slug/:org_id'}, function () { this.resource('building', {path: '/:hall_slug/:hall_id'}); this.resource('group', {path: '/:grp_slug/:grp_id'}); }); }); </code></pre> <p>I cannot work out how to neatly calculate stuff from my complex fixtures data. My models include an organisation with buildings and building groups.</p> <pre><code>//==============================MODELS============================== App.Organisation = DS.Model.extend({ name: DS.attr('string'), buildings: DS.hasMany('building', {async: true}), groups: DS.hasMany('group', {async: true}) }); App.Building = DS.Model.extend({ organisation: DS.belongsTo('organisation'), name: DS.attr('string'), value: DS.attr('number'), groups: DS.hasMany('group', {async: true}) }); App.Group = DS.Model.extend({ organisation: DS.belongsTo('organisation'), buildings: DS.hasMany('building', {async: true}), name: DS.attr('string'), start: DS.attr('date'), end: DS.attr('date'), main: DS.attr('boolean'), value_range: function() { var maximum = 0.0; var minimum = 0.0; this.get('buildings').forEach(function(building) { var v = building.get('value'); maximum = Math.max(maximum, v); minimum = Math.min(minimum, v); }); return {'maximum': maximum, 'minimum': minimum}; }.property('buildings.@each.value') }); </code></pre> <p>I need to calculate stuff based on the whole building group as in the value_range function. This seems to work fine.</p> <p>I have these fixtures</p> <pre><code>//==============================FIXTURES============================== App.Organisation.FIXTURES = [ { id: 1, name: 'Organisation 1', buildings: [1,2,3,4,5,6,7,8,9,10], groups: [1, 2, 4]}, { id: 2, name: 'Organisation 2', buildings: [11,12,13,14,15,16], groups: [3]} ]; App.Building.FIXTURES = [ { id: 1, name: 'Building 1', value: -3.2, groups: [1], organisation_id: 1}, { id: 2, name: 'Building 2', value: 23.2, groups: [1,2], organisation_id: 1}, { id: 3, name: 'Building 3', value: 34.2, groups: [1,2], organisation_id: 1}, { id: 4, name: 'Building 4', value: -3.12, groups: [2], organisation_id: 1}, { id: 5, name: 'Building 5', value: 0.12, groups: [3], organisation_id: 2}, { id: 6, name: 'Building 6', value: 0.2, groups: [3], organisation_id: 2} ]; App.Group.FIXTURES = [ {id: 1, organisation_id: 1, name: 'Group 1', buildings: [1,2,3], main: true}, {id: 2, organisation_id: 1, name: 'Group 2', buildings: [2,3,4], main: false}, {id: 3, organisation_id: 2, name: 'Group 3', buildings: [5,6], main: true}, ]; </code></pre> <p>And I have managed to create a route for an organisation and an index route which should show the default ('main') group.</p> <pre><code>//==============================ROUTES============================== App.OrganisationRoute = Ember.Route.extend({ model: function(params) { return this.store.find('organisation', params.org_id); }, serialize: function(model) {//add prefix to slug and id return { org_slug: model.get('slug'), org_id: model.get('id') }; } }); App.OrganisationIndexRoute = Ember.Route.extend({ model: function(params) { //get buildings from the main group return this.modelFor('organisation').get('groups').then(function(grps) { return grps.findBy('main', true).get('buildings'); }); }, setupController: function(controller, model) { this._super(controller, model); controller.set('organisation', this.modelFor('organisation')); var mygroup = this.modelFor('organisation').get('groups').then(function(grps) { controller.set('group', grps.findBy('main', true)); }); } }); </code></pre> <p>I want to present a simple bar styled with calculated values for each building in the group (left/right and width values). The calculation uses the <code>group.value_range</code> data as well as the <code>building.value</code> data. My problem is that I can't work out where to put this function. The controller doesn't seem to have access to individual buildings. </p> <p>Do I use a handlebars helper? I have hacked this together but it smells.</p> <pre><code>Ember.Handlebars.helper('thing', function(building, group) { var range = group.get('value_range'); var value = building.get('value'); var width = Math.abs(value)/(range.maximum - range.minimum) * 100; var zero_position = Math.abs(range.minimum)/(range.maximum - range.minimum) * 100; if (value &gt;= 0) { left_or_right = 'left'; myclass = 'pos'; } else { left_or_right = 'right'; myclass = 'neg'; zero_position = 100 - zero_position; } return new Handlebars.SafeString( '&lt;div class="my-bar ' + myclass + '" style="width: ' + width + '%; ' + left_or_right + ': ' + zero_position + '%;"&gt;-&lt;/div&gt;' ); }); </code></pre> <p>Or do I need a view? The docs say views are mainly for event processing.</p> <p>I'm not quite groking the ember way on this. Can anyone help?</p>