In this article we will learn about Backbone.js with practical example
Demystify Backbone.js: Implement Model in Backbone.js –Part-1
This is “Demystify Backbone.js” article series. In this
series we will be learning the concept of Backbone.js and various components of it.
In our previous article we have discussed why JavaScript plays vital role in
web application and the basic concept of Backbone.js. You can read our previous
article here.
http://www.dotnetfunda.com/articles/show/2712/demystify-backbonejs-introduction-to-backbonejs
In this article we will learn the implementation of Model in
Backbone.js. To implement Backbone.js we have to download the Backbone.js
library and Backbone.js is dependent on JQuery. So, we have to use JQuery
library when we want to use Backbone.js and point to be noted “Always include
JQuery library before Backbone.js library, otherwise it will not work”.
So, this is all about environment setting and we will
implement Model in Backbone.js. As per discussion in earlier article, Model is
very similar to class in any object oriented programming language.
Implement Model in Backbone.js
In this example we will implement Model with few properties.
Have a look on below code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var Person = Backbone.Model.extend({
defaults:{
name: 'Sourav',
surname: 'Kayal'
}
});
</script>
</form>
</body>
</html>
We have declared Person Model and has set two properties
called “name” and “surname”. We have set
those properties within “defaults” section which is very similar to constructor
in object oriented programming language. So, when we create any object of Person
class then the default value will get set in name and surname property.
Access property of Model class
In our previous example we have learned very simple implement
of Model class. Now we will learn to access property of Model class. In this
example we have set Model class property with default value.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var Person = Backbone.Model.extend({
defaults: {
name: 'Sourav',
surname: 'Kayal'
}
});
var p = new Person({});
console.log("Name:- " + p.get('name'));
console.log("Surname:- " + p.get('surname'));
</script>
</form>
</body>
</html>
To access Model class at first we have to create object of
Model class and then using “get()” function we can get the value of particular
property.
Here is sample output.
Create model class on fly
In our previous example we have learned to implement strong
type class. It means the properties of those classes are pre defined. But in
Backbone.js we can implement loosely type class , means we can set property of
class on fly.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var Person = Backbone.Model.extend({
});
var p = new Person({name:'Sourav',surname:'Kayal'});
console.log("On fly Name:- " +p.get('name'));
console.log("On fly Surname:- " + p.get('surname'));
</script>
</form>
</body>
</html>
In this example at first we are creating one empty class and
then we are setting class property in time of object creation. Here we are
setting name and surname property to “p” object of “Person” class. Here is
sample output of this example.
Set various property on same Model on fly
In our previous example we have learned to set property in
runtime. Now the concept is,”We can set different property of same Model” in
run time. Here is sample implementation.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="backbone/Jquery.js"></script>
<script type="text/javascript" src="backbone/underscore-min.js"></script>
<script type="text/javascript" src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var multi = Backbone.Model.extend({
});
var p = new multi({ name: 'Sourav', surname: 'Kayal' });
var book = new multi({ bookname: 'BackboneJS', author: 'Someone' });
console.log("On fly Name:- " +p.get('name'));
console.log("On fly Surname:- " + p.get('surname'));
console.log("On fly BookName:- " + book.get('bookname'));
console.log("On fly Author:- " +book.get('author'));
</script>
</form>
</body>
</html>
In this example we have created “multi” Model and in first
object of this Model we have set “name” and “surname” property and in second model
we have set “bookname” and “author” property into it. Here is sample example.
Conclusion:-
This is the first part of Model discussion. In coming
articles we will understand more about Model with examples. Hope you
have understood it.