EMBER WORKSHOP: HTMLBars animate (Ember Only)

HTMLBars animate (Ember Only)

by jdcravens

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="https://rawgithub.com/ebryn/0bbe6639da1166bef3ee/raw/c5f715bbee4200d328065fdb34b0bb49f2d748cf/ember-htmlbars-dont-use-me-anywhere-else.prod.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>


<button onclick="runEmber()">Animate with Ember+HTMLBars</button>
<p id="timing">&nbsp;</p>
<div id="grid"></div>

<script type="x-template" id="underscore-template">
  <div class="box" id="box-<%= number %>" style="top: <%= top %>px; left: <%= left %>px; background: rgb(0,0,<%= color %>);">
    <%= content %>       
  </div>
</script>
        
<script type="text/x-htmlbars" id="htmlbars-box">
    <div class="box" id="{{number}}" style="{{style}}"> {{content}}</div>
</script>

CSS

p {
  font: 12px/16px Arial;
  margin: 10px 10px 15px;    
}

button {
  font: bold 14px/14px Arial;  
  margin-left: 10px;
}

#grid {
  margin: 10px;
}

#timing {
  clear: both;
  padding-top: 10px;
}

.box-view {
  width: 20px; height: 20px;
  float: left;
  position: relative;
  margin: 8px;    
}

.box {
  border-radius: 100px;
  width: 20px; height: 10px;
  padding: 5px 0;
  color: #fff;
  font: 10px/10px Arial;
  text-align: center;
  position: absolute;
}

JavaScript

// Change N to change the number of drawn circles.

var N = 100;

// The Ember implementation:
(function(){

var Box = Ember.Object.extend({

    top: 0,
    left: 0,
    content: 0,
    count: 0,

    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);
        this.set('style', this.computeStyle());
    },

    computeStyle: function() {
        return 'top: ' + this.get('top') + 'px; left: ' +  this.get('left') +'px; background: rgb(0,0,' + this.get('color') + ');';
    }

});

var htmlbarsTemplate = Ember.HTMLBars.compile($('#htmlbars-box').text().trim());

var BoxView = Ember.View.extend({
    usingHTMLBars: true,
    template: htmlbarsTemplate,
    classNames: ['box-view']
});

var boxes;
    
// var App = Ember.Application.create();

var emberInit = function() {
    boxes = _.map(_.range(N), function(i) {
        var box = Box.create();
        var view = BoxView.create({context: box});
        view.appendTo('#grid');
        box.set('number', i);
        return box;
    });
};

var emberAnimate = function() {
    Ember.run(function() {
        for (var i = 0, l = boxes.length; i < l; i++) {
          boxes[i].tick();
        }
    });
};


window.runEmber = function() {
    reset();
    emberInit();
    benchmarkLoop(emberAnimate);
};

})();

window.timeout = null;
window.totalTime = null;
window.loopCount = null;
window.reset = function() {
    $('#grid').empty();
    $('#timing').html('&nbsp;');
    clearTimeout(timeout);
    loopCount = 0;
    totalTime = 0;
};

window.benchmarkLoop = function(fn) {
    var startDate = new Date();
    fn();
    var endDate = new Date();
    totalTime += endDate - startDate;
    loopCount++;
    if (loopCount % 20 === 0) {
        $('#timing').text('Performed ' + loopCount + ' iterations in ' +...