Knockout Testing

by Trae

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<h1>Rectangles</h1>
<div id="canvas"></div>

CSS

.rectangle {
    position: absolute;
    border: 4px solid black;
}

JavaScript

(function(){
    var Rectangle = Backbone.Model.extend({});
    var RectangleView = Backbone.View.extend({
        tagName: 'div',
        className: 'rectangle',
        render: function(){
            this.setDimensions();
            this.setPosition();
            return this;
        },
        
        setDimensions: function(){
            this.$el.css({
                width: this.model.get('width') + 'px',
                height: this.model.get('height') + 'px'
            });
        },
        
        setPosition: function(){
            var position = this.model.get('position');
            this.$el.css({
                left: position.x,
                top: position.y
            });
        },
        
        setColor : function(){
            this.$el.css('background-color', this.model.get('color'));
        }
    });
    
    var myRectangle = new Rectangle({
        width: 100,
        height: 60,
        position: {
            x: 300,
            y: 150
        },
        color: 'red'
    });
    
    var myView = new RectangleView({ model: myRectangle });
    $('#canvas').append(myView.render().el)
})();