how to get record count of nested model in Ember.js

Question

I'm building my first rails/ember app, researching with various sources from tutorials and ember documentation. However, I've hit a wall and after alot of digging, I'm still unable to find the answer I'm looking for. Currently, I'm building a GiftList Rails/Ember app where the index page is the Relationships, and a relationship has many recipients. Right now, I have the Relationships displaying and I want it to display the number of recipients of each relationship however each relationship displays 0 when in fact, at least one of the relationships has one recipient(Family has one record). When I check the data in the Ember inspector, GiftList.Recipient has 1 record and GiftList.Relationship has 4 records. How do I show the correct number of recipient records correctly?

ROUTES

Router.js.coffee:

GiftList.Router.map ->
  @resource 'relationships', { path: '/' }, ->
    @resource 'relationship', { path: ':relationship_id' }, ->
      @resource 'recipients', { path: 'recipients' }, ->
        @resource 'recipient', { path: ':recipient_id'}

relationships_route.js.coffee:

GiftList.RelationshipsRoute = Ember.Route.extend
  model: ->
    @store.find('relationship')

recipients_route.js.coffee:

GiftList.RecipientsRoute = Ember.Route.extend
  model: ->
    @store.find('recipient')

CONTROLLERS

relationships_controller.js.coffee:

GiftList.RelationshipsController = Ember.ArrayController.extend({})

relationship_controller.js.coffee:

GiftList.RelationshipController = Ember.ArrayController.extend
  recipients: GiftList.Recipient.find()

MODELS

relationship.js.coffee:

GiftList.Relationship = DS.Model.extend
  name: DS.attr('string')
  recipients: DS.hasMany('recipient')

recipient.js.coffee:

GiftList.Recipient = DS.Model.extend
  first_name: DS.attr('string')
  last_name: DS.attr('string')
  relationship: DS.belongsTo('relationship')

TEMPLATES

relationships.handlebars:

<h2>Relationships</h2>
  <ul id="relationships">
    {{#each}}
      <li>{{name}}({{recipients.length}})</li>
    {{/each}}
  </ul>

*UPDATE***

SERIALIZERS

class RecipientSerializer < ActiveModel::Serializer
  embed :id
  attributes :id, :first_name, :last_name
  has_one :relationship, key: :relationship

end

class RelationshipSerializer < ActiveModel::Serializer
  embed :ids, include: true
  attributes :id, :name
  has_many :recipients, key: :recipients

end

All other code stayed the same

Answer 1

I will assume you are using an ember-data beta build. If you are using an older version, this answer will not apply.

You are fetching all relationships and all recipients when what you want to fetch is the recipients for a particular relationship. If you don't want to embed the hasMany relation in the parent model as sideloaded records, then you need to declare the relationship asynchronous:

GiftList.Relationship = DS.Model.extend
  name: DS.attr('string')
  recipients: DS.hasMany('recipient', { async: true })

Then you just need to get the recipients for the relationship:

GiftList.RecipientsRoute = Ember.Route.extend
  model: ->
    @modelFor('relationship').get('recipients')

This will make an async call to /relationships/:id/recipients to get the recipients for the relationship, because you asking for a asynchronous hasMany property that is not yet loaded on the relationships model.