Iterate through hasMany / belongsTo relation in Ember.js

Question

I want to return the child elements (notes) of a given draft (parent element) as a computed property from my Ember.DocumentController . In this case I want to return all the notes that belong to the editableDraft property.

Or is there a better way of doing it?

App.DocumentController = Ember.ObjectController.extend({
  editableDraft: function() {
    var editDrafts = this.get('model.drafts').filterBy("editable", true);
    var draft = editDrafts.length ? editDrafts[0] : null;
    return draft;
  }.property('model.drafts.@each.editable'),
  editableNotes: function() {
    var eDraft = this.get("editableDraft"); // want to return notes of editableDraft
    return eDraft.get("notes");
  }.property('model.drafts.@each.editable')
});

See test app in the jsbin!

Answer 1

Two problems. One, in the document template, here:

{{render 'editableDraftNotes' notes}}

Render does some weird thing with replacing your controller and model with the provided arguments. Not what you need in this case. Try this:

{{partial 'editableDraftNotes'}}

Two, in the editableNotes property. You should listen to changes on editableDraft . Also, because Ember.Data returns promises, you must chain your gets ( this.get("AB") instead of this.get("A").get("B") ). Try this:

  editableNotes: function() {
    return this.get("editableDraft.notes");
  }.property('editableDraft')

Working jsbin here .