Ember.js pre.4, RESTAdapter and hasMany relationships

Question

I'm doing my damnedest to find and/or cobble together a working jsfiddle of a hasMany/belongsTo relationship in the latest version of ember.js and ember-data that utilizes the RESTAdapter. So far I have found a pre.4 baseline fiddle by @zgramana that puts the new router through some exploration and a @sly7-7 fiddle that utilizes the necessary DS relationship, but bypasses the router for the sake of brevity.

My fumbling WIP attempt to cobble these together into a cohesive example can be found here: http://jsfiddle.net/W2dE4/5/ . I'm obviously a newcomer to ember.js and this fiddle is riddled with errors, so please excuse the lack of skills.

App.Store = DS.Store.extend({
  revision: 11,
  adapter: DS.RESTAdapter.create({})
});

App.Post = DS.Model.extend({
    title: DS.attr('string'),
    post: DS.attr('string'),
    comments: DS.hasMany('App.Comment')
});


App.Comment = DS.Model.extend({
    post: DS.belongsTo('App.Post'),
    description: DS.attr('string')
});

store = App.__container__.lookup('store:');

store.load(App.Post, {
    id: 1,
    title: 'Post 1 Title',
    post: 'Body of post 1',
     comments:[1,2]
    },
       {
    id: 2,
    title: 'Post 2 Title',
    post: 'text of post 2',
     comments:[3,4]
},
{
    id: 3,
    title: 'Post 3 title',
    post: 'text of post3',
     comments:[5,6]
}
      );
store.load(App.Comment, {id: 1, description: "Great post!"},
       App.Comment, {id: 2, description: "Post sucks."},
       App.Comment, {id: 3, description: "Nice style"},
       App.Comment, {id: 4, description: "Horrible writing"},
       App.Comment, {id: 5, description: "Ember.js FTW"},
       App.Comment, {id: 6, description: "Get up get out n' get something"}

      );

If anyone can point me in the right direction to get this fiddle working, or link to a working example of pre.4 with the RESTAdapter and a hasMany relationship, I would be forever indebted to your generosity.

Thank you kindly!

Answer 1

There were only a few syntax issues going on with your fiddle. I've updated it with a working version here: http://jsfiddle.net/W2dE4/6/

1) You weren't loading the store properly. To load multiple items in the same call you need to use loadMany, passing in the model class and an array.

So instead of:

store.load(App.Post, {
  id: 1,
  title: 'Post 1 Title',
  post: 'Body of post 1',
   comments:[1,2]
},
{
  id: 2,
  title: 'Post 2 Title',
  post: 'text of post 2',
  comments:[3,4]
},
{
  id: 3,
  title: 'Post 3 title',
  post: 'text of post3',
   comments:[5,6]
});

store.load(App.Comment, {id: 1, description: "Great post!"},
  App.Comment, {id: 2, description: "Post sucks."},
  App.Comment, {id: 3, description: "Nice style"},
  App.Comment, {id: 4, description: "Horrible writing"},
  App.Comment, {id: 5, description: "Ember.js FTW"},
  App.Comment, {id: 6, description: "Get up get out n' get something"}
);

It should be:

store.loadMany(App.Post, [
  { id: 1, title: 'Post 1 Title', post: 'Body of post 1', comments: [1,2] },
  { id: 2, title: 'Post 2 Title', post: 'text of post 2', comments: [3,4] },
  { id: 3, title: 'Post 3 title', post: 'text of post 3', comments: [5,6] }
]);

store.loadMany(App.Comment, [
  { id: 1, description: "Great post!" },
  { id: 2, description: "Post sucks." },
  { id: 3, description: "Nice style" },
  { id: 4, description: "Horrible writing" },
  { id: 5, description: "Ember.js FTW" },
  { id: 6, description: "Get up get out n' get something" }
]);

2) Your handlebar template call to #each was referencing the wrong property.

Instead of:

{{#each comment in post.comments}}
  {{comment.description}}
{{/each}}

It should be:

{{#each comment in content.comments}}
  {{comment.description}}
{{/each}}

As it's the content property that holds the post data.

Cheers!