https://github.com/emberjs/group-helper

An experimental helper to change the granularity of bindings.
https://github.com/emberjs/group-helper

Last synced: 9 months ago
JSON representation

An experimental helper to change the granularity of bindings.

• Host: GitHub
• URL: https://github.com/emberjs/group-helper
• Owner: emberjs
• License: mit
• Archived: true
• Created: 2012-11-12T22:08:12.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2015-06-20T12:33:24.000Z (about 11 years ago)
• Last Synced: 2024-10-29T14:51:01.811Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 402 KB
• Stars: 86
• Watchers: 12
• Forks: 12
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# 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

```handlebars

  {{#group}}

    {{firstName}} {{lastName}}

  {{/group}}

```

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

```handlebars

  {{#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.

```handlebars

  {{#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.

```handlebars

  {{#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.