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.