javascript - Why this.$el gives undefined error but $(this.el) works inside render function in Backbone view? - Stack Overflow

admin管理员组

文章数量:1395408

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?

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?

• javascript
• backbone.js
• backbone-views

Share Improve this question Follow asked Jan 8, 2013 at 6:50 kushdilipkushdilip 7,92433 gold badges2525 silver badges3030 bronze badges 5

• Wats the version of backbone you're using ? – Cyclone Commented Jan 8, 2013 at 6:52
• ajax.cdnjs./ajax/libs/backbone.js/0.3.3/backbone-min.js – kushdilip Commented Jan 8, 2013 at 6:54
• 2 try upgrading to 0.9.0 or newer one, this.$el property - a cached jQuery (or Zepto) reference to the view's element was added in that version. You can refer to the change log of 0.9.0 in docs. – Cyclone Commented Jan 8, 2013 at 6:56
• Thanks... I was using very old version. Now it's working with this.$el – kushdilip Commented Jan 8, 2013 at 7:00
• I've posted an answer, so that we can reduce unanswered questions by one. – Cyclone Commented Jan 8, 2013 at 7:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.

You need to define in your View like below

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

本文标签：