Demystify Backbone.js: Implement Model in Backbone.js –Part-4

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 2313 red flag

In this article we will learn Model implementation in Backbone.js

Demystify Backbone.js: Implement Model in Backbone.js –Part-4

This is “Demystify Backbone.js” article series. In this article series we will be discussing on Backbone.js and the implementation of it with practical example. Already we have discussed various concepts of Model in Backbone.js , you can read them here.

http://www.dotnetfunda.com/articles/show/2712/demystify-backbonejs-introduction-to-backbonejs

        http://www.dotnetfunda.com/articles/show/2713/demystify-backbonejs-implement-model-in-backbonejs-part-1

http://www.dotnetfunda.com/articles/show/2716/demystify-backbonejs-implement-model-in-backbonejs-part-2

http://www.dotnetfunda.com/articles/show/2717/demystify-backbonejs-implement-model-in-backbonejs-part-3#.Uqh4QcEv0Rg.facebook

In this article we will learn few more concepts of Model implementation. Try to understand those examples.


Show ID of each Model object

When we create one new object of Model class  , in background Backbone.js assign a unique ID called “cid” with each and every object. In this example we will try print those “cid”. Have a look on below example.

<%@ 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>
            Person = Backbone.Model.extend({
                defaults: {
                    name: 'Sourav',
                    surname: 'Kayal'
                }
            });
            var p = new Person({});
            var p1 = new Person({});
            console.log('ID of Object:- ' + p.cid);
            console.log('ID of Object:- ' + p1.cid);
        </script>
    </form>
</body>
</html>

We have created “person” model and after that we are creating two objects of “person” Model then we are printing their “cid”. Here is sample output of above example.


Save Model Data using save() function

It’s very much essential to save Model data after populating its method. To save Model data we have to define one property of Model class called “url”. This property will contain the URL of any service based application, for example Web-API service. Have a look on below example.

<%@ 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>
            Person = Backbone.Model.extend({
                url: '/books',
                defaults: {
                    name: 'Sourav',
                    surname: 'Kayal'
                }
            });
 
            var p = new Person();
            p.save();
 
        </script>
    </form>
</body>
</html>

In this example we have specified particular URL to url property of Model class then we are calling save() method of Model class and it will automatically call to particular url(which we have defined in url property) . Here is output of this example and we are seeing that the save method is calling to particular url, as this url is not exists in real time so we are experiencing this error.


Clear() method of Model object.

We can call clear() method of Model class to clear model property. It will clear all define property of Backbone Model. Here is suitable example for same.

<%@ 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>
            Person = Backbone.Model.extend({
                url: '/books',
                defaults: {
                    name: 'Sourav',
                    surname: 'Kayal'
                }
            });
 
            var p = new Person({});
            console.log('Name is :- ' + p.get('name'));
            p.clear();
            console.log('After clear():-  ' + p.get('name'));
 
        </script>
    </form>
</body>
</html>

Output of the above example code id here.


Clone Model object using Clone() function

We can use clone() method to copy one Model object to another object. In this example we are using clone() method to copy property of “p” object into “p1”. Try to understand below example.

<%@ 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>
            Person = Backbone.Model.extend({
            });
            var p = new Person({ name: 'Sourav', surname: 'Kayal' });
            var p1 = p.clone();
            console.log('Name is :- ' + p.get('name'));
        </script>
    </form>
</body>
</html>


 Conclusion:-

In this article we have learned few important concepts of Model in Backbone.js. Hope you have understood them and in coming articles we will learn more concepts of Model in Backbone.js.

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Posted by: Rama Sagar on: 12/21/2013 | Points: 25
Hi sir,
can you please let me know about the clone function above...There you are getting only the P object data..?
Posted by: Sourav.Kayal on: 12/21/2013 | Points: 25
dear Ram Sagar,
this will be p1, rather than p. It's my mistake.
thanks to point it out. I will update it.

Login to post response

Comment using Facebook(Author doesn't get notification)