A Taste of Backbone

Coded along with the Pluralsight course; Module 1

by emgee

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<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",

                events: {
                    "click": "move"
                },
                render: function () {
                    this.setDimensions();
                    this.setPosition();
                    this.setColour();
                    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
                    });
                },
                setColour: function () {
                    this.$el.css("background-color", this.model.get("colour"));
                },
                move: function () {
                    this.$el.css("left", this.$el.position().left + 10);
                }
            });

            var models = [
                new Rectangle({
                    colour: "#336699",
                    width: 100,
                    height: 60,
                    position: {
                        x: 300,
                        y: 150
                    }
                }),
                new Rectangle({
                    colour: "#996633",
                    width: 440,
                    height: 60,
                    position: {
                        x: 100,
                        y: 450
                    }
                }),
                new Rectangle({
                    colour: "#ff2354",
                    width: 40,
                    height: 560,
  ...