Easier to group bindings. Perf improvements.

app/assets/javascripts/admin/templates/email_logs.js.handlebars

@@ -10,8 +10,8 @@
   </thead>
 
   {{#if model.length}}
-    {{#group}}
+    {{#groupedEach model}}
-      {{#collection contentBinding="model" tagName="tbody" itemTagName="tr"}}
+      <tr>
         <td>{{date created_at}}</td>
         <td>
           {{#if user}}
@@ -24,8 +24,8 @@
         <td><a href='mailto:{{unbound to_address}}'>{{to_address}}</a></td>
         <td>{{email_type}}</td>
         <td>{{reply_key}}</td>
-      {{/collection}}
+      </tr>
-    {{/group}}
+    {{/groupedEach}}
   {{/if}}
 
 </table>

app/assets/javascripts/application.js.erb

@@ -23,10 +23,8 @@ require_asset ("./external/handlebars.js")
 
 if Rails.env.development?
   require_asset ("./external_development/ember.js")
-  require_asset ("./external_development/group-helper.js")
 else
   require_asset ("./external_production/ember.js")
-  require_asset ("./external_production/group-helper.js")
 end
 
 require_asset ("./main_include.js")

app/assets/javascripts/discourse/helpers/grouped_each.js

@@ -0,0 +1,111 @@
+var DiscourseGroupedEach = function(context, path, options) {
+  var self = this,
+      normalized = Ember.Handlebars.normalizePath(context, path, options.data);
+
+  this.context = context;
+  this.path = path;
+  this.options = options;
+  this.template = options.fn;
+  this.containingView = options.data.view;
+  this.normalizedRoot = normalized.root;
+  this.normalizedPath = normalized.path;
+  this.content = this.lookupContent();
+
+  this.addContentObservers();
+  this.addArrayObservers();
+
+  this.containingView.on('willClearRender', function() {
+    self.destroy();
+  });
+};
+
+DiscourseGroupedEach.prototype = {
+  contentWillChange: function() {
+    this.removeArrayObservers();
+  },
+
+  contentDidChange: function() {
+    this.content = this.lookupContent();
+    this.addArrayObservers();
+    this.rerenderContainingView();
+  },
+
+  contentArrayWillChange: Ember.K,
+
+  contentArrayDidChange: function() {
+    this.rerenderContainingView();
+  },
+
+  lookupContent: function() {
+    return Ember.Handlebars.get(this.normalizedRoot, this.normalizedPath, this.options);
+  },
+
+  addArrayObservers: function() {
+    this.content.addArrayObserver(this, {
+      willChange: 'contentArrayWillChange',
+      didChange: 'contentArrayDidChange'
+    });
+  },
+
+  removeArrayObservers: function() {
+    this.content.removeArrayObserver(this, {
+      willChange: 'contentArrayWillChange',
+      didChange: 'contentArrayDidChange'
+    });
+  },
+
+  addContentObservers: function() {
+    Ember.addBeforeObserver(this.normalizedRoot, this.normalizedPath, this, this.contentWillChange);
+    Ember.addObserver(this.normalizedRoot, this.normalizedPath, this, this.contentDidChange);
+  },
+
+  removeContentObservers: function() {
+    Ember.removeBeforeObserver(this.normalizedRoot, this.normalizedPath, this.contentWillChange);
+    Ember.removeObserver(this.normalizedRoot, this.normalizedPath, this.contentDidChange);
+  },
+
+  render: function() {
+    var content = this.content,
+        contentLength = Em.get(content, 'length'),
+        data = this.options.data,
+        template = this.template;
+
+    data.insideEach = true;
+    data.insideGroup = true;
+    for (var i = 0; i < contentLength; i++) {
+      template(content.objectAt(i), { data: data });
+    }
+  },
+
+  rerenderContainingView: function() {
+    Ember.run.scheduleOnce('render', this.containingView, 'rerender');
+  },
+
+  destroy: function() {
+    this.removeContentObservers();
+    this.removeArrayObservers();
+  }
+};
+
+
+Ember.Handlebars.registerHelper('groupedEach', function(path, options) {
+  if (arguments.length === 4) {
+    Ember.assert("If you pass more than one argument to the groupedEach helper, it must be in the form #groupedEach foo in bar", arguments[1] === "in");
+
+    var keywordName = arguments[0];
+
+    options = arguments[3];
+    path = arguments[2];
+    if (path === '') { path = "this"; }
+
+    options.hash.keyword = keywordName;
+  }
+
+  if (arguments.length === 1) {
+    options = path;
+    path = 'this';
+  }
+
+  options.hash.dataSourceBinding = path;
+  new DiscourseGroupedEach(this, path, options).render();
+});

app/assets/javascripts/discourse/templates/list/basic_topic_list.js.handlebars

@@ -10,8 +10,8 @@
     <th class='num activity' colspan='2'>{{i18n activity}}</th>
   </tr>
 
-  {{#group}}
+  {{#groupedEach view.topics}}
-    {{#collection contentBinding="view.topics" tagName="tbody" itemTagName="tr"}}
+    <tr>
       <td class='main-link'>
         <a class='title' href="{{unbound lastReadUrl}}">{{{unbound fancy_title}}}</a>
         {{#if unread}}
@@ -21,35 +21,35 @@
           <a href="{{unbound lastReadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="new_posts"}}'>{{unbound new_posts}}</a>
         {{/if}}
         {{#if unseen}}
-          <a href="{{lastReadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='icon icon-asterisk'></i></a>
+          <a href="{{unbound lastReadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='icon icon-asterisk'></i></a>
         {{/if}}
       </td>
       <td class='category'>
         {{categoryLink category}}
       </td>
-      <td class='num posts'><a href="{{lastReadUrl}}" class='badge-posts'>{{number posts_count numberKey="posts_long"}}</a></td>
+      <td class='num posts'><a href="{{unbound lastReadUrl}}" class='badge-posts'>{{number posts_count numberKey="posts_long"}}</a></td>
 
       <td class='num likes'>
         {{#if like_count}}
-          <a href='{{url}}{{#if has_best_of}}?filter=best_of{{/if}}'>{{like_count}} <i class='icon-heart'></i></a>
+          <a href='{{unbound url}}{{#if has_best_of}}?filter=best_of{{/if}}'>{{unbound like_count}} <i class='icon-heart'></i></a>
         {{/if}}
       </td>
 
       <td {{bindAttr class=":num :views viewsHeat"}}>{{number views numberKey="views_long"}}</td>
       {{#if bumped}}
         <td class='num activity'>
-          <a href="{{url}}" {{{bindAttr class=":age ageCold"}}} title='{{i18n first_post}}: {{{unboundDate created_at}}}' >{{unboundAge created_at}}</a>
+          <a href="{{unbound url}}" {{{bindAttr class=":age ageCold"}}} title='{{i18n first_post}}: {{{unboundDate created_at}}}' >{{unboundAge created_at}}</a>
         </td>
         <td class='num activity last'>
-          <a href="{{lastPostUrl}}" class='age' title='{{i18n last_post}}: {{{unboundDate bumped_at}}}'>{{unboundAge bumped_at}}</a>
+          <a href="{{unbound lastPostUrl}}" class='age' title='{{i18n last_post}}: {{{unboundDate bumped_at}}}'>{{unboundAge bumped_at}}</a>
         </td>
       {{else}}
         <td class='num activity'>
-          <a href="{{url}}" class='age' title='{{i18n first_post}}: {{{unboundDate created_at}}}'>{{unboundAge created_at}}</a>
+          <a href="{{unbound url}}" class='age' title='{{i18n first_post}}: {{{unboundDate created_at}}}'>{{unboundAge created_at}}</a>
         </td>
         <td class="activity"></td>
       {{/if}}
-    {{/collection}}
+    </tr>
-  {{/group}}
+  {{/groupedEach}}
 
 </table>

app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars

@@ -1,10 +1,10 @@
-  {{#if controller.currentUser.id}}
+{{#if controller.currentUser.id}}
   <td class='star'>
     <a {{bindAttr class=":star :icon-star starred:starred"}} {{action toggleStar this}} href='#' {{bindAttr title="favoriteTooltip"}}></a>
   </td>
-  {{/if}}
+{{/if}}
 
-  <td class='main-link clearfix'>
+<td class='main-link clearfix'>
 
   {{#if controller.rankDetailsVisible}}
     <div class='rank-details'>
@@ -35,42 +35,42 @@
         {{#unless canClearPin}}<a href="{{lastReadUrl}}">{{i18n read_more}}</a>{{/unless}}
       {{/if}}
       {{#if canClearPin}}
-          <a href="#" {{action clearPin this}} title="{{unbound i18n topic.clear_pin.help}}">{{i18n topic.clear_pin.title}}</a>
+        <a href="#" {{action clearPin this}} title="{{i18n topic.clear_pin.help}}">{{i18n topic.clear_pin.title}}</a>
       {{/if}}
     </div>
   {{/if}}
-  </td>
+</td>
 
-  <td class='category'>
+<td class='category'>
   {{categoryLink category}}
-  </td>
+</td>
 
-  <td class='posters'>
+<td class='posters'>
   {{#each posters}}
-      <a href="{{user.path}}" class="{{unbound extras}}">{{avatar this usernamePath="user.username" imageSize="small"}}</a>
+    <a href="{{user.path}}" class="{{extras}}">{{avatar this usernamePath="user.username" imageSize="small"}}</a>
   {{/each}}
-  </td>
+</td>
 
-  <td class='num posts'><a href="{{lastReadUrl}}" class='badge-posts'>{{number posts_count numberKey="posts_long"}}</a></td>
+<td class='num posts'><a href="{{lastReadUrl}}" class='badge-posts'>{{number posts_count numberKey="posts_long"}}</a></td>
 
-  <td class='num likes'>
+<td class='num likes'>
   {{#if like_count}}
     <a href='{{url}}{{#if has_best_of}}?filter=best_of{{/if}}' title='{{i18n topic.likes count="like_count"}}'>{{number like_count numberKey="likes_long"}} <i class='icon-heart'></i></a>
   {{/if}}
-  </td>
+</td>
 
-  <td {{bindAttr class=":num :views viewsHeat"}}>{{number views numberKey="views_long"}}</td>
+<td {{bindAttr class=":num :views viewsHeat"}}>{{number views numberKey="views_long"}}</td>
 
-  {{#if bumped}}
+{{#if bumped}}
   <td class='num activity'>
     <a href="{{url}}" {{{bindAttr class=":age ageCold"}}} title='{{i18n first_post}}: {{{unboundDate created_at}}}' >{{unboundAge created_at}}</a>
   </td>
   <td class='num activity last'>
     <a href="{{lastPostUrl}}" class='age' title='{{i18n last_post}}: {{{unboundDate bumped_at}}}'>{{unboundAge bumped_at}}</a>
   </td>
-  {{else}}
+{{else}}
   <td class='num activity'>
     <a href="{{url}}" class='age' title='{{i18n first_post}}: {{{unboundDate created_at}}}'>{{unboundAge created_at}}</a>
   </td>
   <td class='activity'></td>
-  {{/if}}
+{{/if}}

app/assets/javascripts/discourse/templates/list/topics.js.handlebars

@@ -41,9 +41,7 @@
           </tbody>
         {{/if}}
 
-        {{#group}}
         {{collection contentBinding="topics" tagName="tbody" itemViewClass="Discourse.TopicListItemView"}}
-        {{/group}}
 
       </table>
       {{/if}}

app/assets/javascripts/discourse/templates/post.js.handlebars

@@ -47,7 +47,7 @@
             </div>
           </div>
         {{/unless}}
-        {{view Discourse.RawDivView class="cooked" contentBinding="cooked"}}
+        <div class='cooked'>{{{cooked}}}</div>
         {{view Discourse.PostMenuView postBinding="this" postViewBinding="view"}}
       </div>
       {{view Discourse.RepliesView contentBinding="replies" postViewBinding="view"}}

app/assets/javascripts/discourse/views/embedded_post_view.js

@@ -6,15 +6,10 @@
   @namespace Discourse
   @module Discourse
 **/
-Discourse.EmbeddedPostView = Discourse.View.extend({
+Discourse.EmbeddedPostView = Discourse.GroupedView.extend({
   templateName: 'embedded_post',
   classNames: ['reply'],
 
-  init: function() {
-    this._super();
-    this.set('context', this.get('content'));
-  },
-
   didInsertElement: function() {
     Discourse.ScreenTrack.instance().track(this.get('elementId'), this.get('post.post_number'));
   },

app/assets/javascripts/discourse/views/list/topic_list_item_view.js

@@ -2,11 +2,11 @@
   This view handles the rendering of a topic in a list
 
   @class TopicListItemView
-  @extends Discourse.View
+  @extends Discourse.GroupedView
   @namespace Discourse
   @module Discourse
 **/
-Discourse.TopicListItemView = Discourse.View.extend({
+Discourse.TopicListItemView = Discourse.GroupedView.extend({
   tagName: 'tr',
   templateName: 'list/topic_list_item',
   classNameBindings: ['content.archived', ':topic-list-item', 'content.hasExcerpt:has-excerpt'],
@@ -14,11 +14,6 @@ Discourse.TopicListItemView = Discourse.View.extend({
 
   'data-topic-id': Em.computed.alias('content.id'),
 
-  init: function() {
-    this._super();
-    this.set('context', this.get('content'));
-  },
-
   highlight: function() {
     var $topic = this.$();
     var originalCol = $topic.css('backgroundColor');

app/assets/javascripts/discourse/views/modal/option_boolean_view.js

@@ -6,7 +6,7 @@
   @namespace Discourse
   @module Discourse
 **/
-Discourse.OptionBooleanView = Discourse.View.extend({
+Discourse.OptionBooleanView = Discourse.GroupedView.extend({
   classNames: ['archetype-option'],
   composerControllerBinding: 'Discourse.router.composerController',
   templateName: "modal/option_boolean",
@@ -16,12 +16,7 @@ Discourse.OptionBooleanView = Discourse.View.extend({
     metaData = this.get('parentView.metaData');
     metaData.set(this.get('content.key'), this.get('checked') ? 'true' : 'false');
     return this.get('controller.controllers.composer').saveDraft();
-  }).observes('checked'),
+  }).observes('checked')
-
-  init: function() {
-    this._super();
-    return this.set('context', this.get('content'));
-  }
 
 });
 

app/assets/javascripts/discourse/views/post_view.js

@@ -2,11 +2,11 @@
   This view renders a post.
 
   @class PostView
-  @extends Discourse.View
+  @extends Discourse.GroupedView
   @namespace Discourse
   @module Discourse
 **/
-Discourse.PostView = Discourse.View.extend({
+Discourse.PostView = Discourse.GroupedView.extend({
   classNames: ['topic-post', 'clearfix'],
   templateName: 'post',
   classNameBindings: ['postTypeClass',
@@ -28,18 +28,12 @@ Discourse.PostView = Discourse.View.extend({
     });
   }.observes('post.cooked'),
 
-  init: function() {
-    this._super();
-    this.set('context', this.get('content'));
-  },
-
   mouseUp: function(e) {
     if (this.get('controller.multiSelect') && (e.metaKey || e.ctrlKey)) {
       this.get('controller').selectPost(this.get('post'));
     }
   },
 
-
   selected: function() {
     var selectedPosts = this.get('controller.selectedPosts');
     if (!selectedPosts) return false;

app/assets/javascripts/discourse/views/raw_div_view.js

@@ -1,11 +0,0 @@
-// used to render a div with unescaped contents
-
-Discourse.RawDivView = Ember.View.extend({
-
-  shouldRerender: Discourse.View.renderIfChanged('content'),
-
-  render: function(buffer) {
-    buffer.push(this.get('content'));
-  }
-
-});

app/assets/javascripts/discourse/views/search/search_results_type_view.js

@@ -8,17 +8,11 @@
 **/
 Discourse.SearchResultsTypeView = Ember.CollectionView.extend({
   tagName: 'ul',
-  itemViewClass: Ember.View.extend({
+  itemViewClass: Discourse.GroupedView.extend({
     tagName: 'li',
     classNameBindings: ['selected'],
     templateName: Discourse.computed.fmt('parentView.type', "search/%@_result"),
-    selected: Discourse.computed.propertyEqual('content.index', 'controller.selectedIndex'),
+    selected: Discourse.computed.propertyEqual('content.index', 'controller.selectedIndex')
-
-    init: function() {
-      this._super();
-      this.set('context', this.get('content'));
-    }
-
   })
 });
 

app/assets/javascripts/discourse/views/user/user_stream_view.js

@@ -13,13 +13,7 @@ Discourse.UserStreamView = Ember.CollectionView.extend(Discourse.LoadMore, {
   eyelineSelector: '#user-activity .user-stream .item',
   classNames: ['user-stream'],
 
-  itemViewClass: Ember.View.extend({
+  itemViewClass: Discourse.GroupedView.extend({ templateName: 'user/stream_item' }),
-    templateName: 'user/stream_item',
-    init: function() {
-      this._super();
-      this.set('context', this.get('content'));
-    }
-  }),
 
   loadMore: function() {
     var userStreamView = this;

app/assets/javascripts/discourse/views/view.js

@@ -9,6 +9,20 @@
 **/
 Discourse.View = Ember.View.extend(Discourse.Presence, {});
 
+Discourse.GroupedView = Ember.View.extend(Discourse.Presence, {
+  init: function() {
+    this._super();
+    this.set('context', this.get('content'));
+
+    var templateData = this.get('templateData');
+    if (templateData) {
+      this.set('templateData.insideGroup', true);
+    }
+  }
+});
+
+
+
 Discourse.View.reopenClass({
 
   /**

app/assets/javascripts/external_development/group-helper.js

@@ -1,23 +0,0 @@
-(function() {
-var get = Ember.get, set = Ember.set, EmberHandlebars = Ember.Handlebars;
-
-EmberHandlebars.registerHelper('group', function(options) {
-  var data = options.data,
-      fn   = options.fn,
-      view = data.view,
-      childView;
-
-  childView = view.createChildView(Ember._MetamorphView, {
-    context: get(view, 'context'),
-
-    template: function(context, options) {
-      options.data.insideGroup = true;
-      return fn(context, options);
-    }
-  });
-
-  view.appendChild(childView);
-});
-
-})();
-

app/assets/javascripts/external_production/group-helper.js

@@ -1,23 +0,0 @@
-(function() {
-var get = Ember.get, set = Ember.set, EmberHandlebars = Ember.Handlebars;
-
-EmberHandlebars.registerHelper('group', function(options) {
-  var data = options.data,
-      fn   = options.fn,
-      view = data.view,
-      childView;
-
-  childView = view.createChildView(Ember._MetamorphView, {
-    context: get(view, 'context'),
-
-    template: function(context, options) {
-      options.data.insideGroup = true;
-      return fn(context, options);
-    }
-  });
-
-  view.appendChild(childView);
-});
-
-})();
-

test/javascripts/test_helper.js

@@ -13,7 +13,6 @@
 //= require ../../app/assets/javascripts/external/jquery.ui.widget.js
 //= require ../../app/assets/javascripts/external/handlebars.js
 //= require ../../app/assets/javascripts/external_development/ember.js
-//= require ../../app/assets/javascripts/external_development/group-helper.js
 
 //= require ../../app/assets/javascripts/locales/i18n
 //= require ../../app/assets/javascripts/discourse/helpers/i18n_helpers