I see this in someone's code: this.$('.selector') and am curious what that does. "this" is a Backbone view. So what does prefixing "this." onto a jQuery selector, in the given context, do?

I see this in someone's code: this.$('.selector') and am curious what that does. "this" is a Backbone view. So what does prefixing "this." onto a jQuery selector, in the given context, do?

• javascript
• jquery
• backbone.js
• scope

• 1 It's a shortcut for $(this.el).find(...) or $('.selector',this.el) - to scope the queries w.r.t. to the el element – PhD Commented Sep 30, 2012 at 0:00

3 Answers 3

From the doc:

$ (jQuery or Zepto)view.$(selector)

If jQuery or Zepto is included on the page, each view has a $ function that runs queries scoped within the view's element. If you use this scoped jQuery function, you don't have to use model ids as part of your query to pull out specific elements in a list, and can rely much more on HTML class attributes. It's equivalent to running: view.$el.find(selector)

ui.Chapter = Backbone.View.extend({
  serialize : function() {
    return {
      title: this.$(".title").text(),
      start: this.$(".start-page").text(),
      end:   this.$(".end-page").text()
    };
  }
});

In short, it's used to access some elements of View with a familiar syntax.

It is basically limiting the search for elements with a class of selector to the element your View is based off of.

It's basically changing the scope of the search from document to this, which is obviously some element.