Ember Models & Relationships

0
votes

I'm practicing with Ember and Ember Data but I'm stuck with a simple 1-M relationship using Ember Models. Here is the jsbin: http://jsbin.com/nikenu/4/edit?html,js,output

Can anyone tell me where my crayons are?

I see the 2 models are loaded but boxes are not loading crayons via the defined relationship and likewise, crayon's are detecting their box either.

1
ember.jsember-data

1 Answers

0
votes

The relational attributes in your models shouldn't be the Ids - they should refer to the other models. So define your models like this instead:

App.Box = DS.Model.extend({
  owner: DS.attr('string'),
  crayons: DS.hasMany('crayon')             // <----
});
App.Crayon = DS.Model.extend({
  color: DS.attr('string'),
  box: DS.belongsTo('box', {async: true})   // <----
});

Then in your template, you're trying to reference model.crayonIds but remember you're already within a loop, so you should be using item.crayons. So like this: 

<ul>
  {{#each item in model}}
    <li>#{{item.id}} | {{item.owner}}</li>
    {{log item.crayons.length}}
    <h5>Crayons</h5>
    <ul>
      {{#each record in item.crayons}}    <!-- change is here -->
        <li>#{{record.id}} | {{record.color}}</li>
      {{/each}}
    </ul>
  {{/each}}
</ul>