Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>
    {{link-to 'Fast' 'fast'}}
    {{link-to 'Slow' 'slow'}}
    {{link-to 'Reset' 'index'}}
    
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="fast">
  <div class="rendertime">Render Time: {{view.renderTime}}ms</div>
  <table>
  {{#group}}
      <thead><th>Column One</th><th>Column Two</th></thead>
      {{#each App.LargeArray}}
          <tr>
             <td>{{unbound this.columnOne}}</td>
             <td>{{unbound this.columnTwo}}</td>
          </tr>
      {{/each}}
  {{/group}}
   </table>
</script>
<script type="text/x-handlebars" data-template-name="slow">
    <div class="rendertime">Render Time: {{view.renderTime}}ms</div>
    <table>
      <thead><th>Column One</th><th>Column Two</th></thead>
      {{#each App.LargeArray}}
          <tr>
          <td>{{this.columnOne}}</td>
          <td>{{this.columnTwo}}</td>
          </tr>
      {{/each}}
    </table>
</script>

CSS

body { font-family: "Helvetica Neue"; font-weight: 300; margin: 15px; font-color: dimgray; }
h1 { font-size: 1.6em; padding-bottom: 10px; }
th { border-bottom: 1px solid darkgray; }
th, td { padding: 10px 15px 10px 0; }

.rendertime { font-weight: 600; color: #911921; }

JavaScript

App = Ember.Application.create({});

App.LargeArray = function() { 
   var arr = [], i=0;
   for (;i<3000; i++) {
      arr.push({ 
          columnOne: Math.round(Math.random() * 1000), 
          columnTwo: Math.round(Math.random() * 1000) 
      })
   }
   return arr;
}();

App.Router.map(function() {
    this.route('fast');
    this.route('slow');
});

App.IndexRoute = Ember.Route.extend({
    actions: {
        willTransition: function() {
            App.Timer = performance.now();
        }
    }
});

App.SlowView = Em.View.extend({
    renderTime: null,
    
    didInsertElement: function() {
        Em.run.scheduleOnce('afterRender', this, function() {
            this.set('renderTime', (performance.now() - App.Timer).toFixed(2));
        });
    }
});

App.FastView = App.SlowView.extend({});

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);
});