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.