getting started with backbone | Models in Backbone

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it.

How to create a Model in Backbone.
Now lets look at how to create a Model in Backbone

//Create a Model called Cricket
var Cricket=Backbone.Model.extend({
defaults:{
team:'India'
},
initialize:function(){
// trigger when the instance of the model is created
console.log('Model loaded');  
}
});
//Create an instance of an Model
var cricket=new Cricket({team:'Australia'});

Now lets take a look at how to set attributes in a model.
Lets take the same Cricket Model


//Create a Model called Cricket

var Cricket=Backbone.Model.extend({
defaults:{
team:'India'
},

initialize:function(){
// trigger when the instance of the model is created
console.log('Model loaded');  
}

});

//Create an instance of an Model and setting a value
var cricket=new Cricket({team:'Australia'});

//or you can this way as well. create instance then use set method

var cricket=new Cricket;
cricket.set({team:'Australia'});

Now lets take a look at how to get attributes in a model.
Lets take the same Cricket Model

//Create a Model called Cricket

var Cricket=Backbone.Model.extend({
defaults:{
team:'India'
},

initialize:function(){

// trigger when the instance of the model is created
console.log('Model loaded');  
}
});

//Create an instance of an Model and setting a value
var cricket=new Cricket({team:'Australia',playerName:'sachin tendulkar'});

// using get method fetch the values from the model
cricket.get("team") // gets you the team
cricket.get("playerName"); //gets you the player name

How to Manipulate Model attributes in Backbone

//Create a Model called Cricket

var Cricket=Backbone.Model.extend({
defaults:{
team:'India'
},

initialize:function(){

// trigger when the instance of the model is created
console.log('Model loaded');  
},
YourMethodName:function(getTeamName){
    this.set({team:getTeamName});
 }
});

//Create an instance of an Model and setting a value
var cricket=new Cricket({team:'Australia',playerName:'sachin tendulkar'});

cricket.YourMethodName('team India');

// using get method fetch the values from the model
cricket.get("team") // gets you the team India 

suri

I Am suresh(suresh kumar )a Web developer,Freelancer,webdesigner,UI developer from bangalore. Got 6+ yrs of IT experience . I specialize in standards-based XHTML, CSS and JavaScript web development. Each site I develop is built to be search engine friendly (SEO), using the latest development principles and techniques.

You may also like...

2 Responses

  1. Well I am adding this RSS to my email and can look out for a lot more of your respective fascinating content. Make sure you update this again very soon..

  2. SupeMan says:

    BackBone Model with validation

    var SuperHero = Backbone.Model.extend({
    defaults: {
    name: 'SuperMan',
    age: 23,
    passion: 'Technology'
    },
    validate: function(attrs) {
    if ( ! $.trim(attrs.name) ) {
    return console.log('Give the Man a Name!');
    }
    if( attrs.age < 10 ){
    return console.log("He's a SuperKid :O");
    }
    }
    });

    // validation on object creation
    var superMan = new SuperHero({
    name:'Kyel L',
    age: 4

    },{validate:true});

    // validation on SET method
    superMan.set({
    name:'Kyel L',
    age: 20
    },{validate:true})

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>