this.save in backbone

Question

I am on way to learning backbonejs. I am working with the popular todo list tutorial.

I have certain questions about which i am a bit confused:

1. In one the models i found this function:

   toggle: function() {  this.save({completed: !this.get(’completed’)});}
   

   The thing that i don't understand is this.save function. How does it work? What does it actually saves and where. And what does the code inside this function means: completed: !this.get and so on.

2. In one of the views i found this line of code:

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

   Now what does this.input means? And i also don't understand the sytnax this.$('#new-todo');

Let me know if more code is needed for comprehension. Also if anyone could point me to great learning resources for backbone, it will be awesome. Currently i am learning from 'Backbone Fundamentals' by addyosmani.

Answer 1

Backbone Model and Collection both have url properties.

When set properly backbone will make a HTTP POST request with the model as a payload to the url when saved for the first time (id property has not peen set). I you call save and the models id has been already set, backbone will by default make PUT request to the url. Models fetch function generates a GET request and delete a DELETE request.

This is how backbone is made to work with RESTfull JSON interfaces.

When saving a model you can define the actual model to save like it's done in the example.

Read the Backbone.js documentation. It's ok!

Answer 2

http://backbonejs.org/#View-dollar

this.$('#new-todo') // this.$el.find('#new-todo')

Answer 3

toggle: function() { this.save({completed: !this.get(’completed’)});}

Its basically saving inverse value to "completed" attribute of model. so if model's current attribute is true, it would save it to false !

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

Its basically saving/caching DOM with id "new-todo" from current VIEW's 'el' to view instance's 'input' property. so that we do not have to call jQuery methods for getting the same element when we need in future.

hope this helps.

Answer 4

toggle: function() { this.save({completed: !this.get(’completed’)});}

Backbone Model have a url property, when you set a property backbone makes a HTTP request to that url to save that value to the data source. Here it is setting the value of "completed" attribute with inverse of earlier "completed" value, which will be saved to the data source

Answer 5

:)

I too am a backbone newbie and i had been in search of good tutorials that gave good insights into the basics and i found after around 3-4 days of searching. Go through backbonetutorials.com and there is a video compiled which gives exactly what we need to know about Routers, Collections, Views and Models.

The sample working can be found at : http://backbonetutorials.com/videos/beginner/

Although this tutorial is a very basic one, you need to have basic jquery, javascript knowledge. Keep http://www.jquery.com opened in another tab as well when you go through the sample codes. Documentation is extremely useful.

Once you have good knowledge of jquery then if you go through the tutorials, you will understand and pick it up a lot better. And once you get hold of the MV* pattern of backbone you'll love it.

p.s : Do not copy paste codes or functions if you need to learn, type them.!!..

Cheers

Roy