Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EmberJS performance by VoidCanvas.com</title>
</head>
<body>
  
  <script type="text/x-handlebars">
    {{outlet}}
  </script>
  
  
<script type="text/x-handlebars" data-template-name="index">
    <button {{action startAnimation}}>Animate with EmberJS</button>
    <div id="grid">
    {{#each item in model}}
      <div class="box" {{bindAttr id="item.number" style="item.style"}}>
      {{ item.content }}       
    </div>
    {{/each}}
    </div>
  </script>
​
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>
​
</body>
</html>
​
 
App = Ember.Application.create();
​
App.Router.map(function() {
  // put your routes here
});
​
var N=400;
​
​
App.Box=Ember.Object.extend({
    top: 0,
    left: 0,
    content: 0,
    count: 0,
    number:null,
    
    tick: function() {
        var count = this.get('count') + 1;
        this.set('count', count);
        this.set('top', Math.sin(count / 10) * 10);
        this.set('left', Math.cos(count / 10) * 10);
        this.set('color', count % 255);
        this.set('content', count % 100);
    },
    
    style: function() {
        return 'top: ' + this.get('top') + 'px; left: ' +  this.get('left') +'px; background: rgb(0,0,' + this.get('color') + ');';
    }.property('top', 'left', 'color')
});
​
App.IndexController=Em.ArrayController.extend({
  init:function(){
  this._super();
  },
 
  
  animation:function(model){
    model.forEach(function(obj){
      obj.tick();
    });
  },
  
  actions:{
    startAnimation:function(){
setInterval($.proxy(function(){
        this.animation(this.get('model'));
      },this),1);
      //this.animation(this.get('model'));
    }
  }
});
App.IndexRoute = Ember.Route.extend({
​
  model: function() {
    var  boxes = [];    
    for(var i=0; i<N; i++){      
      var box = App.Box.create();
      box.set("number",i);
      boxes.push(box);
    }
    return boxes;
  },
  afterModel:function(){
  console.log("test");
  }
});
Output

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

Dismiss x
public
Bin info
metalshanpro
0viewers