Ember: Rendering nested loops from multiples related models - ember.js

Question

I'm not able to render the following nested loop:
<script type="text/x-handlebars" id="chapters">
<h4>Chapters</h4>
<ul>
{{#each chapter.book}}
<li>
{{book.name}}
{{#each}}
<li>
{{name}}
</li>
{{/each}}
</li>
{{/each}}
</ul>
</script>
What I'm trying to accomplish is to loop through all the books and for each book to loop through its chapters. The model return all the chapters. I suspect that my Handlebars template syntax is not correct.
The following question is helpful but it didn't solve my issue:
How to use multiple models with a single route in EmberJS / Ember Data?
The two models in questions are:
App.Book = DS.Model.extend({
name: DS.attr('string'),
icon: DS.attr('string'),
description: DS.attr('string'),
createdDate: DS.attr('date'),
chapters: DS.hasMany('chapter', { inverse: 'book', async: true}),
bookAssignments: DS.hasMany('bookAssignment', {async: true}),
user: DS.belongsTo('user', { inverse: 'books', async: true} ),
});
App.Chapter = DS.Model.extend({
name: DS.attr('string'),
description: DS.attr('string'),
unit: DS.attr('string'),
dashboard: DS.attr('boolean'),
createdDate: DS.attr('date'),
source: DS.attr('string'),
book: DS.belongsTo('book', { inverse: 'chapters', async: true}),
user: DS.belongsTo('user', { inverse: 'chapters', async: true} )
});
The route:
App.ChaptersRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('chapter');
},
});
Thanks in advance.

Answer 1

In your case you'd want to get all of the unique books, and iterate through them. With a chapters controller it'd be something like this:
App.ChaptersController = Ember.ArrayController.extend({
//content because they are promises
books: Ember.computed.mapBy('model', 'book.content'),
uniqueBooks: Ember.computed.uniq('books'),
});
Template (I added another UL)
<script type="text/x-handlebars" id="chapters">
<h4>Chapters</h4>
<ul>
{{#each book in uniqueBooks}}
<li>
<ul>
{{book.name}}
{{#each chapter in book.chapters}}
<li>
{{chapter.name}}
</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>
Example of the unique: http://emberjs.jsbin.com/vuhaga/3/edit?html,js,output