Update template after model update

Question

I'm trying to create a track list page. On the page we have songs with their name, artist and such. When the user votes for a song(up/down) the number of votes should be updated and the list should be re-filtered so that the song with the most votes is the first in the list.

Until now this was done by the server. But we are trying to avoid that get request so that only one post for the vote has to be done.

Getting the amount of votes to update was very simple:

route.store.find('Track', track_id).then(function (track) {
                    track.set('votes', track.get('votes') + 1);
                });

But after searching Google and the Ember docs for a while there seems to be not a lot about the sorting of results so that when I update a property on the a model that the order will also update on the template.

Model:

App.Track = DS.Model.extend({
    name: DS.attr('string'),
    artist: DS.attr('string'),
    picture: DS.attr('string'),
    votes: DS.attr('number'),

    voted: DS.attr('boolean'),
    vote_type: DS.attr('boolean')
});

Controller:

App.TracklistingController = Ember.ArrayController.extend({
    sortProperties: ['votes'],
    sortAscending: false
});

I use the following to get the tracks in the current list:

return route.store.all('Track');

This is the first project we are doing in Ember so I'm just a newb in the world of Ember and have no idea what is going wrong here.

You should use observes. Don't use controller if you want to update to ember 2 because controllers'll be depricated. — Hasib Mahmud

Unknown Unknown · Accepted Answer · 2015-01-27T18:23:58

I believe that the problem lies in the way you are fetching tracks. You shouldn't access them directly from the store.

Try renaming your TracklistingController to TrackController. This way ember can bind it directly to your model, and then inside the Track template use the 'model' variable to iterate through all tracks (this is created automatically by ember).

This is from the top of my head, I hope it helps.

EDIT: Check out this link, it explains how to do it properly: http://emberjs.com/guides/controllers/representing-multiple-models-with-arraycontroller/

Update template after model update

1 Answers