emberjs/group-helper

An experimental helper to change the granularity of bindings.

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.

group-helper's Issues

Attribute binding not working properly with components inside each blocks

Here's a quick jsbin illustrating the issue: http://emberjs.jsbin.com/migol/6/edit

You can wrap a component inside the group helper and it would work. However, if you have a group block with an each block rendering a component, the component's properties are not properly bound.

Is there any way to make this work?

I'm trying to figure out why, but I'm not familiar enough with ember's internals yet :)

Thanks!

itemController support

The group helper doesn't currently work with itemController's defined as arguments to the each helper. I'm working on a fix for this.

Block helper displays no data

I have the same issue as #3

No error is thrown but no data is output when wrapping {{#each}} in the group helper. My issue is that the table I'm building is very large but performance is pretty terrible. The table is static but I do need actions to work on the row so they are clickable.

    {{#group}}
        {{#each}}
            <tr {{action "getContext">
                <td>{{unbound name}}</td>
                <td>{{unbound time}}</td>
                <td>{{unbound count}}</td>
            </tr>
        {{/each}}
    {{/group}}

The only thing I see where there should be tr rows are a metamorph element:

<tbody>
<script id="metamorph-43-start" type="text/x-placeholder"></script>
<script id="metamorph-43-end" type="text/x-placeholder"></script>
</tbody>

I'm using the following versions of Ember:

DEBUG: ------------------------------- 
DEBUG: Ember      : 1.5.0 
DEBUG: Handlebars : 1.3.0 
DEBUG: jQuery     : 2.1.0 
DEBUG: ------------------------------- 

#group & #with not working together.

I noticed issues concerning use of {{#group}} & {{#with}} in EmberJS 1.0 & 1.3:

Consider template file element.handlebars:

{{#group}}
  {{#each item in items}}
    {{#with item}}
      {{#if item.containedInParent}}
        {{#unless item.showWithControls}}
          <li>
            {{partial 'element'}}
          </li>
        {{/unless}}
      {{/if}}
    {{/with}}
  {{/each}}
{{/group}}

This seems to work with only a single level of recursion, i.e. nested {{#each}} never get rendered.

On the other hand the following:

{{#each item in items}}
  {{#group}}
    {{#with item}}
      {{#if item.containedInParent}}
        {{#unless item.showWithControls}}
          <li>
            {{partial 'element'}}
          </li>
        {{/unless}}
      {{/if}}
    {{/with}}
  {{/group}}
{{/each}}

seems to generate infinite recursion (tested in Chrome & Firefox).

Besides group-helper, is there any other place in EmberJS that sets insideGroup to true? Is the code path where insideGroup is true tested in any way in EmberJS?

Should ember.js application developers use group-helper?

Hello

I have an ember app that renders a large nested list. It is pretty slow (10s on a 2010 MBPro). Reading this thread: http://discuss.emberjs.com/t/ember-is-very-slow-at-rendering-lists/1643 I decided to give the group-helper a shot. Looking at the code it seems that group-helper may not work with ember 1.8.1. Do I have to build ember along with group-helper to use it?

I cloned the repo and got this error when running bundle install:
fatal: repository 'https://github.com/emberjs/docs-generator.git/' not found

I removed the offending gem from the Gemfile and was able to build the project.

I'm concerned that the version of ember group-helper comes with is quite out of date (2012).

Do the authors of group-helper know of another helper, plugin, library that forces ember to not create virtual views & controllers for every element in a list/nested list built with {{each}} and {{view}}? Most of the nested elements in my app don't require data binding and would work well as simple tags.

Thanks!

#Group helper does not work with #each helper when using element naming

Here's a JSBin illustrating the problem:

http://emberjs.jsbin.com/wawurize/1/edit

Basically this works:

  {{#group}}
    <ul>
    {{#each model}}
      <li>{{this}}</li>
    {{/each}}
    </ul>
  {{/group}}

But this doesn't

  {{#group}}
    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>
  {{/group}}

Any thoughts on what the problem could be?

distro for download or instructions for use

I'd love to try this out, but am somewhat intimidated by how to go about getting it into my project. My current guess (which I'm about to embark on trying) is to clone the repo, bundle and build the distribution js file.

I tried a (admittedly lazy) approach of just copying the body of packages/group-helper/lib/main.js into a helper in my app but that produced some weird results.

So this request is to provide a distribution and/or instructions for how to go about pulling this into a project.