Question

I am quite new to backbone.js with little experience in javaScript. I was trying various backbone tutorial found here and there. e.g. from this tutorial I was trying to learn

backbone-baby-steps

In most of the tutorials like above one, they use following code inside Backbone.View.extend to set the model in html template and then render it,

render: function() {
    var tmpl = _.template(this.template);
    this.$el.html(tmpl(this.model.toJSON()));
    return this;
    }

but when I run the code in chrome debugger it says this this.$el is undefined. I searched a lot but didn’t get the solution, then I modified the code by own and it worked,

$(this.el).html(tmpl(this.model.toJSON()));

I’m using cdnjs hosted libraries for backbone, underscore and jquery.

I want to know why every backbone tutorial on internet is using this.$el version but it doesn’t work for me?

And also, when I use the the library(backbone, underscore etc.) files provided by the tutorials instead of hosted one, chrome debugger gives various errors in libraries, why?

Answer 1

As per the change log specified in the docs, $el property – a cached jQuery (or Zepto) reference to the view's element was added in version 0.9.0. Try upgrading the version of backbone you’re using to 0.9.0 or above. It should work after that.