Codebeerstartups

3. Defining models in backbone js – Learning Backbone js

Introduction

Featured

Backbone.js

3. Defining models in backbone js – Learning Backbone js

Posted by Mohit Jain on .

This entry is part 3 of 14 in the series for A Complete Guide for Learning Backbone Js


Agenda

In the previous lesson, we created a Person Class. So if we want to define the same class in backbone js. And that’s what we will be learning in this lesson. “Defining models in Backbone js.” It’s pretty straight forward. Remove the previous code from main.js and add this code. Take a look on this.

var Person = Backbone.Model.extend({
    defaults: {
        name: 'Guest User',
        age: 23,
        occupation: 'Worker'
    },
    work: function(){
        return this.get('name')  +  'is working.';
    }
});

In the above code, we are defining the class and set some default values like for name, age, and occupation.

Fire up the console and fire these commands

Now if checkout chrome we can see a lot of cool awesome things. Type these commands one by one.

var person = new Person;  // creating a new object

person  // printing that object. -> Notice output of this.

// 1. We have access to attributes,
// 2. We have access to functions,
// 3. We have access to changed object, which helps us to check if the object has been changed or not.
// 4. If something has been changed then backbone will announce that thing and
// 5. we can hook into that to update DOM or do other cool things.

Getters

We can get all the previous things like to get the name, age or occupation. In backbone js, we do that by using get method

person.get('name')// will display the name ie Default User
person.get('age')// will display the age  ie 23
person.get('occupation')// will display the occupation ie Worker

You can’t do things like:

person.name // THATS invalid..
person.age  // THATS invalid..

Setters

And now you can even update name, or age, etc.

person.set('name', 'Taroon Tyagi')// will update the name
person.set('age', 26)             // will update the age
person.set('occupation', 'Graphics Designer')// will update the occupation

or you can update the values in just on go ie

person.set({name:"Taroon Tyagi", age: 26, occupation: "Graphics Designer"})

Set values while initiating object

Another thing can be you can set values while launching, i.e.,

var person = new Person({name:"Taroon Tyagi", age: 26, occupation: "Graphics Designer"})

One last point - JSON output

person.toJSON(); // this will return all the attributes of that object. It will not return a Json be returned what we need :)

Output on Chrome Console

Let’s take a look how things look like on chrome console.

Defining models in in backbone js

That’s how you define models in Backbone js. In the next post, let’s add some validations in the model. For example. Age can’t be zero or negative. Or name can’t be blank etc.


Source code

If you are facing any issues. Check out the source code files at github. I will be creating more and more directories in the same repo regarding each post. Still, if you have any doubts you can comment on the blog post itself, and I will try to reply back asap.

user

Mohit Jain

http://codebeerstartups.com

Rails Developer