Ember: Rendering nested loops from multiples related models

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.

I'm a little worried about the idea of returning all the chapters... is that just to cheapen the call to the server? When are you getting all of the books? Are they already fetched? Or are you wanting to get them asynchronously? — Kingpin2k, Nov 05 '14 at 05:21
Eventually the ChaptersRoute will return only the chapters owned by the user. I assume that Ember-Data will fetch only the books related to the fetched chapters? Maybe I should access the data differently? Initially, I had nested the ChaptersRoute under the BooksRoute, but since the chapters need to by shown under each book, the outlet in the eventual books template would need to be nested in the {{each}} loop which is not supported. Thus I did not nest my routes. Maybe I should have taken another approach? — Samuel Segal, Nov 05 '14 at 12:23

score 1 · Accepted Answer · answered Nov 05 '14 at 05:55

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

Worked like a charm. Thank you again Kingpin2k! – Samuel Segal Nov 09 '14 at 22:16 — Samuel Segal, Nov 09 '14 at 22:16

Ember: Rendering nested loops from multiples related models

1 Answers1