CODEWITHSUNDEEP
meteormeteor-blaze
pietro abate
pietro abate

Reputation: 479

Meteor embedded templates cause re-rendering

On a single page, I'd like to display a list of editors and grouped under each editor, the list of books from this editor. Each editor have many books, and I've many editors, and the editors must be ordered using a score derived by the books associated to this editor. E.g by the first editor is the editor is most popular books (and I this is a completely different problem that I suspect I can solve with some mongodb magic aggregation. see link for associated question at the end).

I want to have a button for "more editors", and one for "more books" under each editor. I've two collections, one for editors and one for books with a link back to the editors and I've setup two subscriptions, one for each with limits. Basically my template does

<template name="onepage">
  {{#each editor in AllEditors}}
     {{editor.name}}
     {{> bookList editor }}
  {{/each}}
  <button>more editors</button>
</template>
<template name="bookList">
  {{#each book in AllBooks}}
    {{book.name}}
  {{/each}
  <button>more books</button>
</template>

The problem is that clicking on "more editors" my entire page re-render.

The new editor is correctly added at the end of the list, but the result is not very user friendly. I can see the problem. Requesting one more editor (using a subscription and a limit) I force to recompute the AllEditors variable, that force to recompute each BookList template. When I ask for more books, the new book is correctly added without flickering as I ask blaze to just add one element and it is smart enough to avoid re-rendering the entire template.

How can I restructure these two templates to avoid this problem ?

Update:

this is not the actual code I'm using, but this is the main idea for the onCreated and helpers functions

Template.onepage.onCreated () ->
  template = this
  template.limit = new ReactiveVar(10)

  template.autorun () ->
    limit = template.limit.get()
    template.subscribe("editors",limit)

Template.onepage.helpers
 'allEditors': () ->
    template = Template.instance()
    limit = template.limit.get()
    Editors.find({},{}, {limit:limit})

And similarly for the book template

Associated question : sort mongo collection based on the score of child documents

Upvotes: 1

Views: 47

Answers (1)

Jeffrey Flynt
Jeffrey Flynt

Reputation: 318

When I do something like this, I do not separate into different templates. I use a template helper with a parent/child relationship.

Template.page.helpers({
   groups() {
     return ...
   },
   items(parent) {
     if(parent) {
       return ...
     } else {
       return null;
     }
   }
});

Simple example in html:

<div>
 {{#each groups}}
   {{this.groupname}}
   {{#each items this}}
     {{_id}}
   {{/each}}
 {{/each}}
</div>

Just make sure the groupname matches a field in items, so they can be grouped together. Start with an initial limit, then with a click event, expand that limit. This will cause the editors list to grow without the page refreshing. I use this method in quite a few areas with success.

Upvotes: 1

Related Questions