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

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

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

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

This is “Demystify Backbone.js” article series. In this series we are talking about Backbone.js. We have discussed why Backbone.js is and JavaScript plays important role in modern web application. You can read previous discussion in this series by visiting below link.

Part-1

Part-2

Part-3

Part-4

 

Access default property of Model class

In this example we will learn the default property of Model class using prototype attribute. In below Model implementation we have defined two properties of “Person” model called name and surname then we are accessing those default property by prototype property. Have a look on below example.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<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'
                }
            });
 
            console.log('Access name by prototype:- ' + Person.prototype.defaults.name);
            console.log('Access surname by prototype:- ' + Person.prototype.defaults.surname);
        </script>
    </form>
</body>
</html>

Here is sample output of above example.


Set default property using prototype

We can able to set prototype property of Model class, by this method we can assign new value to Model class and can able to alter old value. Here is sample implementation with suitable 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>
            var Person = Backbone.Model.extend({
                defaults:{
                    name: 'Sourav',
                    surname:'Kayal'
                }
            });
            Person.prototype.defaults.name = 'Ajay';
            Person.prototype.defaults.surname ='Joshi';
            console.log(Person.prototype.defaults.name);
console.log(Person.prototype.defaults.surname);
 
        </script>
    </form>
</body>
</html>


We are seeing that new property value has assign to Model class.

Sync() function to preserve persistency of Model

It’s very much essential to preserve the persistency of Model object in time of save operation. Using Sync() method we can keep persistency of Model class object.

<%@ 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>
            Backbone.sync = function (method, model) {
               console.log(method + ": " + JSON.stringify(model));
                model.id = 1;
            };
 
            var book = new Backbone.Model({
                title: "Backbone.js",
                author: "Someone"
            });
            book.save();
           
        </script>
    </form>
</body>
</html>

Here is output of above example.


Conclusion

In this article we have learned few important concepts of Model implementation in Backbone.js. Hope you have understood it and in coming article we will learn various concepts of Collection 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

Login to post response

Comment using Facebook(Author doesn't get notification)