Backbone Views in EaselJS

Sandbox

by Andy Novocin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/EaselJS/0.7.1/easeljs.min.js"></script>
<div class="canvasHolder">
    <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
</div>

CSS

#gameCanvas {
    background-color : lightblue;
}

JavaScript

var MyBoxView = Backbone.View.extend({
    initialize : function(options){
      options = options || {};
      this.container = options.container || new createjs.Container();
      this.canvasEvents(this.cEvents);
    },
    cEvents : {
        "click" : "handleClick"  
    },
    canvasEvents : function(cEvents){
       if (!cEvents) return this;
       for (var key in cEvents){
           var method = cEvents[key];
           if (!_.isFunction(method)) method = this[cEvents[key]];
           if (!method) continue;
           method = _.bind(method, this);
           var eventName = key;
           this.container.on(eventName, method, this);
       }
       return this;
    },
    handleClick : function(){
        this.container.x += 10;
    },
    render : function(){
        this.box = new createjs.Shape();
        this.box.graphics.beginFill("#9900FF").drawRect(0,0,100,100);
        //populate the displayObject container here, add to stage later
        this.container.addChild(this.box);
        return this;
    }
});
//??displayObj into view precreated or runtime created?

var myView = new MyBoxView();

var stage = new createjs.Stage("gameCanvas");
stage.addChild(myView.render().container);
createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(event) {
    stage.update();
}