Represent an array of a model in Ember

Question

I am writing a Music player Component with favorites songs from SoundCloud using their API

I want automatically play the next favorite song once the previous is finished.

The idea is to create a new property to represent an array of all my favorites to pass the nextFavorite

This is my player controller

sortedFavorites: Ember.computed.alias('favorites’),

and

actions: {
    selectFavorite: function(favorite, index, play) {
            if (!this.get('externalPlay')) {
                index = index + 1;
                nextFavorite = this.get('sortedFavorites').nextObject(index, favorite);
                self.set('nextFavorite', nextFavorite);
            }
            return SC.stream(favoritePath, {
                onfinish: function() {
                    self.set('isPlaying', false);
                    if (self.get('nextFavorite') != null) {
                        return self.send('selectFavorite', self.get('nextFavorite'), index);
                    }
                }
            }
        }
   }
}

When i create a new property the alias for “favorites” , it is undefined

In case i create an alias for a single favorite i can access to my single favorite although it’s not what i need to do

My problem is that the favorite model doesn't have DS.hasMany pointing to a DS.Model

so i don't know how to figure it

This is the favorite model

import DS from 'ember-data';

var Favorite = DS.Model.extend({
    duration: DS.attr('string'),
    title: DS.attr('string'),
    genre: DS.attr('string'),
    artwork_url: DS.attr('string'),
    uri: DS.attr('string'),
    users: DS.hasMany('user')
});

export default Favorite;

so how can the sortedFavorites be an array of all my favorites in order to access to the nextObject (favorite)?

The Route

var MusicRoute = Ember.Route.extend({
    needs: ['player'],
    player: Ember.computed.alias('controllers.player'),
    beforeModel: function() {
        return SC.initialize({
            client_id: window.soundcloud_api_key,
            redirect_url: '#'
        });
    },
    model: function(params) {
        var artist, self, ret;
        self = this;
        artist = params.artist;
        ret = [];
        this.controllerFor('application').set('artistName', artist);

        return new Ember.RSVP.Promise(function(resolve, reject) {
            return SC.get("/users/" + 'mannaio' + "/favorites", {
                limit: 40
            }, function(favorites) {
                if (favorites.length) {
                    favorites.forEach(function(item) {
                        var favorite;
                        favorite = self.createFavoritelist(item);
                        ret.push(favorite);
                        favorite.user = self.createUser(item.user);
                    });
                    resolve(ret);                
                } else {
                  return reject(self.errorHandler(artist));
                }
            });
        });
    },
    setupController: function(controller, model) {
        var favorite ;
        this._super(controller, model);
        favorite = model.get('firstObject');
        this.controllerFor('player').set('favorite', favorite).send('selectFavorite', favorite, 0, false);
        return controller;
    },
    renderTemplate: function() {
        this._super();
        return this.render('player', {
            into: 'music',
            outlet: 'player',
            controller: 'player'
        });
    },
    createFavoritelist: function(favorite) {
        return this.store.createRecord('favorite', {
            id: favorite.id,
            title: favorite.title,
            duration: favorite.duration,
            uri: favorite.uri,
            artwork_url: favorite.artwork_url,
            genre: favorite.genre,
        });
    },
    createUser: function(user) {
        return this.store.createRecord('user', {
            username: user.username,
            avatar_url: user.avatar_url,
        });
    },
});

Answer 1

looks like favorites is not really defined?

Maybe do an alias on the model (if you want an alias) or a copy if not?

Also you don't have to return a controller from setupController..

try setting up the model on the favorites controller?

self.controllerFor('player').set('favorites', model);

In your setup controller, so you don't need the second alias.

If that doesn't work, you can also try having the player controller access the music controller (I assume that's the music controller) Add:

needs : 'music'

which then you should have access to the music controller:

this.get('controller.music.model') -> favorites

to the play controller, and you should have access to the music model, which looks like your favorites..

http://guides.emberjs.com/v1.10.0/controllers/dependencies-between-controllers/