为什么这个。$ el给出了未定义的错误，但$（this.el）在Backbone视图中的render函数内部工作？

Question

I am quite new to backbone.js with little experience in javaScript. I was trying various backbone tutorial found here and there. eg 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.

Answer 2

You need to define in your View like below

var ElementView = Backbone.View.extend({
    el: $("#picker")
}