CODEWITHSUNDEEP
javascriptbackbone.js
Shaz Ravenswood
Shaz Ravenswood

Reputation: 1835

What does this.$something = this.$('something') mean?

I've just started going through backbone fundamentals and don't quite understand what's going on here:

this.$input = this.$('#new-todo');

Could someone give me an overview / breakdown of what this actually does?

From what my limited understanding tells me, this.$('#new-todo') is a typical jquery selector, that finds the #new-todo (an input) and gives it to this.$input, which (according to this) is a shorthand of sort for $(this + 'input'), but here's where I loose it - why is that actually there? Is it really just assigning the #new-todo from the DOM to $(this + 'input')? If so, wouldn't be better just to use the this.$('something') DOM selector instead of what's in the this.$input?

Upvotes: 2

Views: 322

Answers (4)

Cyclone
Cyclone

Reputation: 1580

this.$input will be just an attribute to the object which this is pointing to.

And this.$('#new-todo') will find and return the matching element from the current view (element pointed by el for the view).

When we do this.$, according to the docs, the queries to get the element specified by the selector are scoped within the view's element (say el). Here is what scope means in jQuery, referred by context there.

Hence this.$('#new-todo') isn't same as jQuery('#new-todo').

Upvotes: 0

Kyle
Kyle

Reputation: 22258

The code example is caching the jQuery element.

When you use the jQuery constructor, you are querying the DOM; finding all elements that match. Depending on the selector you use, this could potentially be a very expensive operation.

If you plan to use a jQuery object multiple times, it is better to only query the DOM once.

Here is an example:

var foo = $('.someClass');
foo.css("background-color", "yellow");
console.log(foo.length + " items updated");

Even though the code above used foo multiple times, the DOM was only queried once.

Wouldn't it be nice if your code made the fact that foo is a jQuery object a little more obvious?

// a lot of developers like to prepend a $ to variable names
var $foo = $('.someClass');

Upvotes: 3

Aditya Manohar
Aditya Manohar

Reputation: 2274

Backbone.$ delegates to jQuery (or Zepto).

In this case this.$ will delegate to jQuery and return an element with id new-todo

this.$input is a naming convention to indicate that $input is a jQuery object.

The this object refers to a Backbone instance and not a DOM context.

this.$ == jQuery

this.$input is just an attribute.

this.$input = this.$("#new-todo"); can be rewritten as:

this.input = jQuery("#new-todo"); or

this.input = $("#new-todo");

$input is just an arbitrary named property, just like variables can be named as $foo, $bar etc.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191729

It's not doing $(this + 'input') that I know of because that would probably be invalid unless this is a string. I don't know Backbone, but it seems that this.$ is jQuery, so this.$("#new-todo") in Backbone is the same as jQuery('#new-todo'), which just selects that element. Storing it in a member named $input allows you to only call the jQuery selector function once, and it also allows you to reference this.$input in other methods without having to know the original selector.

Upvotes: 0

Related Questions