Ember data not loading nested hasMany

Question

Problem

I have an Ember app with Rails 4 support that needs to iterate over some children, and then iterate over child children. Settings - Session → hasMany → Annotations → hasMany → Indicators.

I can load the / session / 1 show display template and display the session properties. I can also iterate over session annotations and display annotation text. However, when I repeat the annotation indicators, nothing appears. If I post {{#with annotation}}{{indicators}}{{/with}}, I just get<DS.PromiseArray:ember802>

Ember calls AJAX calls / sessions / 1 and / annotations ids% 5B% 5D = 113 & ids% 5B% 5D = 112. However, it never calls the call / indicators.

I saw other posts that describe the same problem, but the solutions for them often came down to the camel body, etc. In this case, since / indicators are not even called, what am I doing wrong?

Environment

ember.js - 1.5.1  
ember-data.js - 1.0.0-beta.7  
Written in CoffeeScript  

Firing setting

Insight.ApplicationAdapter = DS.ActiveModelAdapter.extend({})  
Insight.ApplicationSerializer = DS.ActiveModelSerializer.extend({})

Models

App.Indicator = DS.Model.extend {
  title:      DS.attr 'string'
}

App.Annotation = DS.Model.extend {
  text:         DS.attr 'string'
  session:      DS.belongsTo 'session', inverse: 'annotations'
  indicators:   DS.hasMany 'indicator', async: true
}

App.Session = DS.Model.extend {
  subject: DS.attr 'string'
  students: DS.attr 'number'
  time: DS.attr 'string'
  annotations: DS.hasMany 'annotation', async: true
}

Routes

App.SessionRoute = Ember.Route.extend {
  model: (params)->
    return @store.find('session', params.session_id)`

Session Session Template (Relevant Part)

<section class='content'>
  {{#each annotation in annotations itemController="annotation"}}
    {{#with annotation}}
      <li {{bind-attr class="isCompleted:completed isEditing:editing"}}>
          {{#if isEditing}}
            {{edit-annotation class="edit" value=bufferedText focus-out="doneEditing" insert-newline="doneEditing" escape-press="cancelEditing"}}
          {{else}}
              {{text}}
            </div>            
          {{/if}}
          {{#each indicator in indicators}}
            <button>{{indicator.title}}</button>
          {{/each}}
      </li>
    {{/with}}
  {{/each}}
  {{view Ember.TextField id="new-annotation" placeholder="Enter an annotation" valueBinding="newAnnotation" action="createAnnotation"}}
</section>

JSON GET Payload

{"session":{
  "id":4,
  "subject":"Name of Subject",
  "students":1,
  "time":"08:52",
  "annotations":[113,112]}
}

{"annotations":
  [
    { "id":112,
      "text":"this is my first annotation",
      "session":4,
      "indicators":[1]
    },
    { "id":113,
      "text":"This annotation has indicators",
      "session":4,
      "team_member":8,
      "indicators":[1,2]
    }
  ]
}

Answer 1

The problem is the JSON format.

The format you use is the format adopted by RESTAdapter

data: [
  title: "Some Title",
  items: [1,2]
]

However, the ActiveModelAdapter expects the data to be in this format:

data: [
  title: "Some Title",
  item_ids: [1,2]
]

To solve the problem, you can either change it to a RESTAdapter or change the data producer to create the correct format.

JSBin , .