CODEWITHSUNDEEP
ember.jsember-data
i0n
i0n

Reputation: 926

How to iterate through a hasMany collection in Ember using a different controller for each record

I have three models defined in Ember and all returning json on request:

App.Comment = DS.Model.extend({
    discussion: DS.belongsTo('App.Discussion')
});

App.Discussion = DS.Model.extend({
    meeting: DS.belongsTo('App.Meeting'),
    comments: DS.hasMany('App.Comment')
});

App.Meeting = DS.Model.extend({
    discussions: DS.hasMany('App.Discussion')
});

From the route meeting/:id in the meeting controller I want to be able to iterate over the collection of discussions, setting a new discussion controller for each instance. I then need to be able to iterate through each discussions comments, doing the same again. Currently I seem to be able to access the attributes defined on the associations, but if I call a computed property I get an incorrect result returned (for example a count of 0 when it should be 5). I think the problem is something to do with the context of the controller, because I cannot seem to return the values for that object within the controller. It's probably something really simple, but I just can't see it. What am I doing wrong?

Here are the controllers:

App.MeetingController = Ember.ObjectController.extend({
    needs: ['discussion']
});

App.DiscussionController = Ember.ObjectController.extend({
    commentCount: function(){
        return this.get('comments.length');
    }.property('comments')
});

Then in the meeting.hbs template:

{{#each discussion in discussions}}
    {{ render 'discussion' discussion }}
{{/each}}

And the discussion.hbs template, this works:

<div>
    {{ comments.length }}
</div>

but this does not:

<div>
    {{ commentCount }}
</div>

Where am I going wrong?

Upvotes: 2

Views: 2313

Answers (1)

Teddy Zeenny
Teddy Zeenny

Reputation: 3971

I think the issue is with how you defined the computed property, it looks like the binding didn't work.

Try using .property('comments.@each') instead:

App.DiscussionController = Ember.ObjectController.extend({
  commentCount: function(){
    return this.get('comments.length');
  }.property('comments.@each')
});

Update 10 July 2014: You can now use:

App.DiscussionController = Ember.ObjectController.extend({
  commentCount: Ember.computed.oneWay('comments.length')
});

Upvotes: 6

Related Questions