ember - didLoad event in view for waiting for a ember-data model to load

Question

hi i have the following route:

MB3.PlaylistRoute = Ember.Route.extend({
  model: function(params) {
    return MB3.Playlist.find(params.playlist_id);
  }
});

The playlist has a hasMany realtion with tracks. in the playlist view i want do do some logic with an attribute of the first track of the playlist.

so i added this code:

MB3.PlaylistView = Ember.View.extend({
  didInsertElement: function() {
    console.log(this.get("controller.tracks").objectAt(0).get("title"));
  }
});

The problem is title is undefined (i think because it is not yet loaded. the second thing i tried is waiting for the didLoad event:

MB3.PlaylistView = Ember.View.extend({
      didInsertElement: function() {
        var self=this;
        this.get("controller.tracks").on("didLoad", function() {
          console.log(self.get("controller.tracks").objectAt(0).get("title"));
        });
      }
    });

but this logges null as well. How do i accomplish that?

It is probably be because of the issue #587. If so, a workaround could be to observe the length of the array. — Adrien Coquio
hmm this could relate to that bug yes. I also thought about observing the length but then my logic would be executed everytime i add a track aswell. what i want to do is to embed a youtube player to play the songs in the playlist. of course i do only need to embed that player once and change the track via the player api. but i need a video id to embed the player. thats why i wanted the first track — Dominik Goltermann

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-02-05T13:58:18

Like Adrien said in the comments, it seems you are running into issue 587. That said, I don't think you actually need the "didLoad" callback in this case. Instead, try using a computed property to get the video_id or track title. For example:

MB3.PlaylistView = Ember.View.extend({
  firstTrackTitle: function() {
    return this.get('controller.tracks.firstObject.title');
  }.property('controller.tracks.firstObject.title')      
});

Then in your template, embed the player if this property is defined:

{{#if view.firstTrackTitle}}
    embed code here
{{/if}}

FWIW I would put this logic in controller instead of view, but same idea.

ember - didLoad event in view for waiting for a ember-data model to load

1 Answers