If you’ve read my last post or have just been keeping up with the JavaScript world at all, you’ve probably heard about Backbone.js. Well, this is the beginning of a tutorial series for Backbone.js and with this new series also comes a new media type: video! Today’s video tutorial teaches you how to get started using the M from MVC: the model. It’s pretty simple, yet pretty awesome and powerful.

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

UPDATE: This tutorial is slightly outdated. I’ve made changes to the code below to match it up with how Backbone works now after version 1.0 was released. Changes:

• Line 7: 'error' changed to 'invalid'. The name of the event that fires when a model fails to validate has changed from ‘error’ to ‘invalid’ to be more semantic.
• Line 23: Added , {validate:true}. Models no longer validate automatically when calling set. You must explicitly pass in this option to have it validate.

Final JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Person = Backbone.Model.extend({
    initialize: function() {
        console.log('hello world');
        this.bind("change:name", function() {
            console.log(this.get('name') + " is now the value for name");
        });
        this.bind('invalid', function( model, error ) {
            console.error(error);
        });
    },
    defaults: {
        name: "Bob Hope",
        height: "unknown"
    },
    validate: function ( attributes ) {
        if( attributes.name == 'Joe' ) {
            return "Uh oh, you're name is Joe!";
        }
    }
});

var person = new Person();
person.set({name: "Joe", height:"6 feet"}, {validate:true});

console.log(person.toJSON());

Conclusion

This is my first video tutorial so bear with me. I hope you learned something and are eager to learn more. The next video tutorial should come out next Thursday and will be featuring Views. I hope you’re as excited to continue this series as I am. 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