Introduction
This chapter demonstrates about the Backbone.js Model which are the building blocks of backbone.js used build an backbone.js application and following are the concepts are covered in this chapter.
- Model
Description
Backbone.js models are used to build the Backbone.js applications which are the most important building blocks and these models also know as heart of the javascript application which contains dynamic data and its logic and is used to perform different types actions like conversions, validations, computed properties, access control etc. Following are the list of some methods which can be used to manipulate the backbone.js Model.
| method | Description |
|---|---|
| extend | While creating Backbone model extend is used extend the backbobne model class. |
| get | Which gets model attribute value. |
| set | Which sets the model attribute value. |
| escape | Which is same as get function but it returns escaped version HTML model attribute. |
| has | attribute value demonstrates with non-defined value or null value the which returns true. |
| unset | By using unset attribute can be removed from backbone model. |
| clear | Which is used to clear all attributes with id attribute from backbone model. |
| id | Which is used to identify model entity uniquely. Which can be set manually if the model is created or circualted and saved within the server. |
| idattribute | Which demonstrates the unique model identifier with name of the class member which is used as class id |
| cid | cid is a client which is auto-generated by Backbone and uniquely identifies the client model. |
| changed | Is used to change the all the attributes after setting the attribute using a set() method. |
| defaults | Which is used to set model default value and simply states if user does not specify any data. |
| atoJSON | For JSON stringification which returns the some copy of the attributes as an object for as an object. |
| sync | Which is used to get contact with the server and to represent a model state. |
| fetch | In the model fetch is used to accepts the data from the server by delegating sync() method. |
| save | Which is used to save the model data by delegating to sync() method and it reads and save the model each and every time if the backbone calls. |
| destroy | Which is used to destroy or remove the model from the server with backbone.sync method and it releases HTTP request i.e "delete". |
| validate | Which returns the error message if an input is invalid if an input is valid which does not specify anything simply which display the result. |
| validatioError | If validation fails which it display validation error. |
| isValid | Which is used to check the state of the model with the validate() method and which also verify validation for each attribute. |
| url | Which is an instance of the model and which returns URL of the model resource like where it is located. |
| urlRoot | If it enables the URL function to generate the URL by using the model id. |
| parse | Which returns the model's data by represent the data in JSON format. |
Which is used to extend the Backbone.model class when creating the backbone model and the syntax below demonstrates the extend() methods as shown below.
[code]
Backbone.Model.extend(properties, [classProperties])
[/code]
Parameters
The code below demonstrates the extend() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Model Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
MyModel = Backbone.Model.extend({
initialize: function(){
document.write("Welcome to SPlessons");
}
});
var mymodel = new MyModel;
</script>
</head>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Properties Which provides instance properties for model class.
- classProperties Class properties attached to the constructor function.
Backbone.js initialize function is invoked by class constructor while creating a model instance and when the model instance gets created then class constructor called and the syntax below demonstrates the initialize() method.
[code]
new Model(attributes, options)
[/code]
Parameters
The code below demonstrates the initialize() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Initialize Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
MyModel = Backbone.Model.extend({
initialize: function(){
document.write("Welcome to splessons");
}
});
var mymodel = new MyModel;
</script>
</head>
<body></body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- attributes Which defines properties of a model while creating an instance of a model.
- options Which are options like id, name etc used with attributes when the model gets created?
Backbone.js get model is used to get the value of an attribute on a model and the syntax below demonstrates the get() method.
[code]
model.get(attribute)
[/code]
Parameters
The code below demonstrates the get() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Get Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Person = Backbone.Model.extend();
var person = new Person();
person.set({ fname: "splessons", lname:"Smith"});
document.write("Name of the Website: ", person.get('fname'));
</script>
</head>
<body></body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- attributes Which defines properties of a created model.
Backbone.js set model is used to set the value of the attribute in the model and the syntax below demonstrates the set().
[code]
model.set(attribute)
[/code]
Parameters
The code below demonstrates the set() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Set Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Person = Backbone.Model.extend();
var person = new Person();
person.set({ fname: "Splessons", lname:"Simple"});
document.write("What's my Website name: ", person.get('fname'));
</script>
</head>
<body></body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- attributes Which defines properties of a created model.
Backbone.js Escape model is same as to get the function in return form user will get HTML escaped version of model attribute and the syntax below demonstrates the escape().
[code]
model.escape(attribute)
[/code]
Parameters
The code below demonstrates the escape() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Escape Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Person = Backbone.Model.extend();
var person = new Person();
person.set({name: "Dany"});
document.write(person.escape("name"));
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- attributes Which defines properties of a created model.
Backbone.js has model returns true when the attribute value set to non null or non-undefined value.
[code]
model.has(attribute)
[/code]
Parameters
The code below demonstrates the has() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Has Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Company = Backbone.Model.extend();
var company=new Company();
company.set({ Name: "splessons pvt. ltd.", comp_site:"www.splessons.org"});
if(company.has('comp_site'))
{
document.write("The company has a site: True");
}
else
{
document.write("The company has a site: False");
}
</script>
</head>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- attributes Which defines properties of a created model.
Backbone.js unset model is used to remove an attribute from a backbone model.
[code]
model.unset(attribute)
[/code]
Parameters
The code below demonstrates the unset() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Unset Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Company = Backbone.Model.extend();
var company=new Company();
company.set({ comp_name: "SPLessons.Org"});
document.write("<b>Before using unset method , Company name is:</b> ", company.get('comp_name'));
company.unset('comp_name');
document.write("<br>");
document.write("<b>After unset, Company name is:</b>", company.get('comp_name'));
</script>
</head>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- attributes Which defines properties of a created model.
Backbone.js clear model is used to remove the all attributes with id attribute from backbone model.
[code]
model.clear(options)
[/code]
Parameters
The code below demonstrates the clear() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Clear Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Model = Backbone.Model.extend();
var model = new Model({name:"SPlessons", id:1});
document.write("<b>Before using clear, name: </b>", model.get('name'));
document.write("<b>Before using clear, id: </b>", model.get('id'));
document.write("<br>");
model.clear();
document.write("<b>After using clear, name:</b> ", model.get('name'));
document.write("<b>After using clear, id: </b>", model.get('id'));
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- options
- Which are options like id, name etc used with attributes when the model gets created?
Backbone.js id model is used identify the model uniquely and model identity will be manually set when the model get created.
[code]
model.id
[/code]
The code below demonstrates the id() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Id Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Car = Backbone.Model.extend({
defaults: {
id: 7070
}
});
var car = new Car();
document.write("Id of the model: ", car.get('id'));
</script>
</head>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Backbone.js idAttribute model gives us the unique identifier which contain the name of the class which will be used as id.
[code]
model.idAttribute
[/code]
The code below demonstrates the idAttribute() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> idAttribute Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Person = Backbone.Model.extend({
defaults: {
idAttribute: 'id'
}
});
var person = new Person({id:5, name:"dany"});
document.write("<b>Unique indentifier of Model Person is:</b> ", person.idAttribute);
</script>
</head>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Backbone.js cid which specify the client id and it is automatically generated by the Backbone.js and which can be uniquily identified on the client.
[code]
model.cid
[/code]
The code below demonstrates the cid() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Client id Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Person = Backbone.Model.extend();
var person = new Person();
document.write("<b> Before setting unique identifier of model Person : </b>",person.id);
document.write("<br>");
document.write("<b> Before setting unique identifier of model Person, CID: </b>",person.cid);
document.write("<br>");
var person = new Person({id: 1});
document.write("<b> After setting unique identifier of model Person : </b>",person.id);
document.write("<br>");
document.write("<b> After setting unique identifier of model Person, CID: </b>",person.cid);
</script>
</head>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Backbone.js attribuites which define the property of a model and uses the set() method to update the attributes.
[code]
model.attributes
[/code]
The code below demonstrates the attributes() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Attributesl Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Person = Backbone.Model.extend();
var person = new Person();
person.set({ name: "Dany"});
document.write(person.get('name'));
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Backbone.js changed model is used to change the attributes which are changed after setting the attribute by using the set method.
[code]
model.changed
[/code]
The code below demonstrates the changed() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Changed Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
Tutorial = Backbone.Model.extend({
defaults: {
p_name: 'SPLessons',
country: 'india'
},
initialize: function () {
this.bind("change:p_name", function (model) {
var name = model.get("p_name");
var ctry = model.get("country");
});
}
});
var person = new Tutorial();
document.write("<b>Before changing the name attribute, its value is:</b> ", person.get("p_name"));
person.set({ p_name: 'Simple Programing' });
document.write("<br><b>After changing the name attribute, its value is:</b> ", person.get("p_name"));
</script>
</head>
<body></body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Backbone.js defaults model is used to set a default value to a model which ensure that if a user doesn't show any data the model would not fall with null property.
[code]
model.defaults
[/code]
The code below demonstrates the defaults() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> Default Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Person = Backbone.Model.extend({
defaults : {
"title": "Hello",
"description": "SPlessons- A solution of all technology."
}
});
var person = new Person();
document.write(person.get('description'));
</script>
</head>
<body></body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Backbone.js to JSON model returns copy of the attributes those are object for JSON stringification.
[code]
model.toJSON(options)
[/code]
The code below demonstrates the toJSON() method as shown below.
[html]
<!DOCTYPE html>
<head>
<title> toJSON Example</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
var Person = Backbone.Model.extend();
var person = new Person({
title: "Splessons",
description: "A solution of all technology."
});
document.write(JSON.stringify(person));
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Models are the most important building blocks.
- Models are also known as heart of JavaScript.