Backbone Rectangles Example 1

by shravan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<h1>Rectangles</h1>

<div id="canvas"></div>

CSS

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

JavaScript

(function () {

    var Rectangle = Backbone.Model.extend({});

    var RectangleView = Backbone.View.extend({
        tagName: 'div',
        className: 'rectangle',
        events: {
            'click': 'move'
        },
        render: function () {
            this.$el.css({
                'width': this.model.get('width') + 'px',
                    'height': this.model.get('height') + 'px'
            });

            this.$el.css({
                'left': this.model.get('position').x,
                    'top': this.model.get('position').y
            });

            this.setColor();

            return this;
        },
        setColor: function () {
            this.$el.css("background-color", this.model.get('backgroundColor'));
        },
        move: function () {
            this.$el.css("left", this.$el.position().left + 10);
        }
    });


    var myRectangle = new Rectangle({
        width: 100,
        height: 60,
        position: {
            x: 50,
            y: 100
        },
        backgroundColor: 'red'
    });
    var myRectangleView = new RectangleView({
        model: myRectangle
    });

    $("div#canvas").append(myRectangleView.render().el);

})();