Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
49 lines (35 sloc) 1.75 KB

Ember.js group helper

This is an experimental plugin to allow an application developer to change the granularity of bindings in a template. This can lead to significant performance improvements when outputting many bound properties, inside of an #each for example.

The general rule is that the group helper causes the nearest view to be rerendered when a property inside it changes. It also prevents the common Handlebars helpers (#if, #unless, #each) from creating virtual views.

Currently requires Ember.js master.

Usage

  {{#group}}
    {{firstName}} {{lastName}}
  {{/group}}

Changes to firstName or lastName will rerender the whole group block.

  {{#group}}
    {{#each people}}
      {{firstName}} {{lastName}}
    {{/each}}
  {{/group}}

The whole group block will be rerendered upon addition/removal of elements in the people array or any properties output within the each block.

  {{#group}}
    {{#each people groupedRows=true}}
      {{firstName}} {{lastName}}
    {{/each}}
  {{/group}}

Specifying the groupedRows option will cause the #each to behave like a normal bound #each. There will be a virtual view for the each itself and for every row. Addition/removal of elements in the array will insert/remove rows in the DOM without causing the group to rerender. Since each row has a virtual view, changing a property output inside a row will only rerender that row.

  {{#group}}
    {{#each people itemViewClass="App.RowView"}}
      {{firstName}} {{lastName}}
    {{/each}}
  {{/group}}

You can alternatively specify an itemViewClass to get the behavior as detailed above, but instead of rows being virtual views, they'll be instances of your specified class.