Everyone loves AJAX. A few years back it was probably the biggest buzz word in all of web development. Now HTML5 and CSS3 have stolen the show, but AJAX has now taken its place as a first-class citizen among web development – and specifically JavaScript – tools. And to make things even better, Backbone.js has built in support for AJAX and makes it dead simple for you to use it to synchronize your models with a database, as I show in this video tutorial.
Backbone.js Video Tutorial Series
- Backbone.js Part 1: Models
- Backbone.js Part 2: Views
- Backbone.js Part 3: Routers
- Backbone.js Part 4: Collections
- Backbone.js Part 5: AJAX
- Backbone App Walkthrough Part 1: HTML and Models
- Backbone App Walkthrough Part 2: Views and Templates
- Backbone App Walkthrough Part 3: New View and External Templating
- Backbone App Walkthrough Part 4: It Lives!
- Backbone App Walkthrough Part 5: RequireJS
Final JavaScript Code
-
Backbone.emulateHTTP = true; // Use _method parameter rather than using DELETE and PUT methods
-
Backbone.emulateJSON = true; // Send data to server via parameter rather than via request content
-
-
var Person = Backbone.Model.extend({
-
initialize: function() {
-
this.on('all', function(e) { console.log(this.get('name') + " event: " + e); });
-
},
-
defaults: {
-
name: 'undefined',
-
age: 'undefined'
-
},
-
urlRoot: "/backbone.php",
-
url: function() {
-
var base = this.urlRoot || (this.collection && this.collection.url) || "/";
-
if (this.isNew()) return base;
-
-
return base + "?id=" + encodeURIComponent(this.id);
-
}
-
});
-
-
var person = new Person({id:1});
-
person.fetch(); // fetch model from DB with id = 1
-
-
person = new Person({name:"Joe Zim", age:23});
-
person.save(); // create and save a new model on the server, also get id back and set it
-
-
person = new Person({id:1, name:"Joe Zim", age:23});
-
person.save(); // update the model on the server (it has an id set, therefore it is on the server already)
-
person.destroy(): // delete the model from the server
-
-
var People = Backbone.Collection.extend({
-
initialize: function() {
-
this.on('all', function(e) { console.log("People event: " + e); });
-
},
-
model: Person,
-
url: "/backbone.php"
-
});
-
-
var people = new People();
-
people.fetch(); // Get all models for this collection
-
people.create({name:"Joe Zim", age:23}); // Create model, add to Collection and add to DB
-
people.create({id:6, name:"Chuck Norris", age:72}); // Update model: add to Collection, update DB
Database and PHP Script
I’ve gotten a request for the PHP Script that was used in the demo for the video, so I’ve included it – along with a SQL export of the MySQL Database – right here so you guys can do some experimentation of your own. Enjoy! Download PHP and SQL
Concluding Backbone.js AJAX and the Whole Backbone.js Tutorial Series
That’s all there is to this Backbone.js tutorial series, but make sure to check back in a couple weeks or so when I start a series showing step by step how to use Backbone.js to create a full application. Happy Coding!
Backbone.js Video Tutorial Series
- Backbone.js Part 1: Models
- Backbone.js Part 2: Views
- Backbone.js Part 3: Routers
- Backbone.js Part 4: Collections
- Backbone.js Part 5: AJAX
- Backbone App Walkthrough Part 1: HTML and Models
- Backbone App Walkthrough Part 2: Views and Templates
- Backbone App Walkthrough Part 3: New View and External Templating
- Backbone App Walkthrough Part 4: It Lives!
- Backbone App Walkthrough Part 5: RequireJS
About the Author
Joe Zim
Joe Zimmerman has been doing web development ever since he found an HTML book on his dad's shelf when he was 12. Since then, JavaScript has grown in popularity and he has become passionate about it. He also loves to teach others though his blog and other popular blogs. When he's not writing code, he's spending time with his wife and children and leading them in God's Word.