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?

Answer 1

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.