Ember Not Rendering Embedded Data

Question

I setup an app that runs fine with the Fixture Adapter on.

This is a template that I'm using to render:

  <div class="large-7 columns" id="song-list"> 
    <div class="playlist-meta row">
      <div class="large-12 columns">    
        <h4 class="subheader">Playlist</h4>    
        <h1 class="playlist-title">{{controller.name}}</h1> 
      </div>
    </div>

    {{#view App.SortableView}}  
    {{#each song in controller.songs}}
      <li class="row song">
        <button {{action "playSong" song}} class="toggle-play"><span class="entypo play"></span></button>
        <h4 class="subheader song-artist"><a href="#">{{song.artist}}</a></h3>
        <h3 class="song-title"><a href="#">{{song.name}}</a></h3>
      </li>    
    {{/each}}
    {{/view}}
  </div>

When I use the REST Adapter, however, the songs do not render. The playlist name itself still renders, but not the songs.

This is what is being returned to me in terms of JSON:

{"playlist":{"id":1,"name":"playlist","songs":[{"id":1,"name":"Song Name","artist":"Song Artist","soundcloud":"/tracks/1"}]}}

Model as defined when I was using Fixture data:

App.Playlist = DS.Model.extend({
  name: DS.attr('string'),
  songs: DS.hasMany('App.Song'),
});

App.Song = DS.Model.extend({
  name: DS.attr('string'),
  artist: DS.attr('string'),
  soundcloud: DS.attr('string'),
  playlist: DS.hasMany('App.Playlist'),
});

App.Playlist.FIXTURES = [
  {
    id: 1,
    name: 'Playlist Name',
    songs: [1, 2, 3],
  }];
App.Song.FIXTURES = [
  {
    id: 1,
    name: 'Song Name',
    artist: 'Song Artist',
    soundcloud: '/tracks/12345',
  }];

Could it be that you should have {{#each song in playlist.songs}}? Your sample of parsed JSON is an object with key playlist, which in turn has the key songs. However, {{controller.name}} wouldn't work either I suppose, it would have to be {{playlist.name}}. — Christoffer
{{controller.name}} is working as expected (outputting "playlist" in this example). Since I'm able to access the name, I'd figure songs would be fine too. Unless I'm overlooking a typo, this is the exact same setup that I have in my Fixture Data — paulruescher
how are you Models defined? and more importantly the relationships? could you update the question showing this? loading data from the FixtureAdapter is not the same as with the RESTAdapter. — intuitivepixel

paulruescher paulruescher · Accepted Answer · 2013-05-02T02:00:55

Here's my solution. I don't know if it's the 'Ember Way', so if someone who knows better comes along, please let me know a better solution. But for the time being this works for me.

I changed my JSON output to the following (compare to my question and how I was outputting JSON):

{
"songs":[
    {"id":1,"name":"Song Name","artist":"Artist Name","soundcloud":"/tracks/123"},
    {"id":2,"name":"Song Name 2","artist":"Artist Name 2","soundcloud":"/tracks/124"}
],
"playlist":
    {"id":1,"name":"Playlist Name","song_ids":[1,2]}
}

I'm using the 'ember-rails' gem which includes https://github.com/rails-api/active_model_serializers (see the section on Embedded Assocations).

This is my PlaylistSerializer:

class PlaylistSerializer < ActiveModel::Serializer
  embed :ids, :include => true

  attributes :id, :name
  has_many :songs, :key => :song_ids, :root => :songs
end

Ember Not Rendering Embedded Data

1 Answers