Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.10.1.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
  <script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.min.js"></script>
</head>
<body>
  <script type="text/x-handlebars">
    <button {{action toggle}} >Toggle</button>
    
    <div id="numbers">
      {{#group}}
        {{#each items}}
          <span>{{ this }}</span>
        {{/each}}
      {{/group}}
    </div>
  </script>
</body>
</html>
  
 
span {
  padding: 5px;
  display: inline-block;
  background-color: #AEf;
}
 
App = Em.Application.create();
App.ApplicationController = Em.Controller.extend({
  items: [],
  allItems: [],
  init: function () {
    for (var i=1; i<=2000; i++) {
      this.allItems.push(i);
    }
  },
  toggle: function () {
    if (this.get("items.length") > 0) this.set("items", []);
    else this.set("items", this.allItems);
  }
});
var lastTime = new Date();
var timer = function() {
  var elapsed = (new Date()-lastTime);
  if (elapsed > 100) console.log(elapsed/1000.0+"s");
  lastTime = new Date();
  setTimeout(timer, 0);
};
timer();
(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);
});
})();
(function() {
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers