Backbone this.el is undefined

Question

I've been following along to the a tutorial i found on youtube. https://www.youtube.com/watch?v=vPW1inIsln4

In the tutorial I don't see him defining el : ... but he's calling this.$el and it appears to be working.

In jsfiddle, I have been following along, but get a js error saying

Backone this.el is undefined

http://jsfiddle.net/tga2La9L/

Could someone explain to me what is happening?

<div id="canvas"/>

(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() {
        var position = this.model.get('position');
        this.$el.css({
            left:position.x,
            top:position.y
        });
    }

});

var myRectangle = new Rectangle({
    width:100,
    height:60,
    position: {
        x:300,
        y:150
    }
});

var myView = new RectangleView({model: myRectangle});

$('div#canvas').append(myView.render().el);

})();

Answer 1

Your Fiddle uses a very old version of Backbone, 0.3.3, dating from Dec 1, 2010. Changing to the current version of Underscore (1.8.3) and Backbone (1.2.1) solves the error

See http://jsfiddle.net/nikoshr/tga2La9L/3/ for an updated version