Question

I have just begun learning ember.js, I have followed some tutorials and created a working example here:

App.Track.reopenClass({
    find: function() {
        var tracks = [];

        $.ajax({
            url: 'http://ws.spotify.com/lookup/1/.jsonuri=spotify:album:6J6nlVu4JMveJz0YM9zDgL&extras=track',
            dataType: 'json',
            context: this,
            success: function(data, textStatus, jqXHR) {
                $.each(data.album.tracks, function(index, value) {
                    track_id = value.href.replace("spotify:track:", "");
                    tracks.addObject(App.Track.create(value));
                    // I would rather do something like:
                    // tracks[track_id] = App.Track.create(value)
                });
            }
        })
        return tracks;
    }
});

This function hits an API and loops through the returned data to populate the tracks object (tracks.addObject(App.Track.create(value));) and return it.

Rather than getting an ordinary object back from this function, I would like to get an Enumerable / Array so I can manipulate it with filterProperty or pull out tracks by id (There is a track_id which I would like to use as the array index).

All of my attempts to use an array have broken ember’s magical ability to update the view when the ajax call populates the tracks.

Can anyone modify http://jsfiddle.net/ZEzwn/ to return an Enumerable (preferably an Array) but still update the view automatically?

Answer 1

As your method already returns an Array (because you have Ember prototype extension enabled), doing:

var tracks = [];

is equivalent to

var tracks = Ember.A();

On ajax request success, you’re just populating the array, so you could use Ember.Array methods like filterProperty.

Just one thing about using id as array key, you really SHOULD NOT, as Ryan Bigg says in its blog:

However, if the variant’s id is [something a little higher, like] 1,013,589,413, then you start to run into problems.

In that case, JavaScript would create a one billion, thirteen million, five hundred and eighty-nine thousand, four hundred and fourteen element array. All to store one value in, right at the end.