BACKBONE

by Julien Etienne

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 () {
    // Create Model
    var Rectangle = Backbone.Model.extend({});

    // Create View
    var RectangleView = Backbone.View.extend({
        tagName: 'div',
        className: 'rectangle',

        events: {
            'click': 'move'
        },

        render: function () {
            this.setDimensions();
            this.setPosition();
            this.setColor();
            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'));
        },

        move: function () {
            this.$el.css('left', this.$el.position().left + 10);
        }



    });

    var models = [
    new Rectangle({
        width: 100,
        height: 60,
        position: {
            x: 300,
            y: 150
        },
        color: '#ff0000'
    }),

    new Rectangle({
        width: 26,
        height: 300,
        position: {
            x: 500,
            y: 75
        },
        color: '#00ff00'
    }),

    new Rectangle({
        width: 300,
        height: 70,
        position: {
            x: 310,
            y: 200
        },
        color: '#0000ff'
    })

    ];

    _(models).each(function (model) {
        $('div#canvas').append(new RectangleView({
            model: model
        }).render().el);
    });




})();