In this article we will discuss about Model in Backbone.js
Demystify Backbone.js: Implement Model in Backbone.js –Part-2
This is Backbone.js article series. In our previous articles
we have discussed the importance of JavaScript and components of Model in
Backbone.js. You can read them from
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
In this article we will learn more about Model
implementation in Backbone.js.
Set Model property using set() method
We can set property of Model using set() method. In this
example we are creation on empty Model and them
<%@ 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 person = new Person();
person.set({ name: "Sourav",surname: "Kayal" });
console.log(person.get('name'));
console.log(person.get('surname'));
</script>
</form>
</body>
</html>
setting model property. The properties are name and surname.
Then we are accessing them using get() method. Here is sample output of
example.
Define function within model
In our previous article we have seen to set property in
Model, but as Model is very similar to class so it can contain function too. In
this example we will set function as member of the Model. 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>
Person = Backbone.Model.extend({
myfunction:function(){
console.log('I am function within Person Model');
}
});
var p = new Person();
p.myfunction();
</script>
</form>
</body>
</html>
The “myfunction” property containing one anonymous function ,which
we are calling with object of Person class.
Print Model property within function
In our previous example we have learn to set function in
Model. In this example we will access Model property within function. 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'
},
Print: function () {
console.log('Name is:- ' + this.defaults.name);
console.log('Surname is:- ' + this.defaults.surname);
}
});
var person = new Person();
person.Print();
</script>
</form>
</body>
</html>
We are printing the property of Model using “this” operator.
This is sample output.
Show Model data as JSON format
Model in Backbone.js containing toJSON() function which will
help to convert Model data to JSON format directly.
<%@ 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 person = new Person();
console.log(person.toJSON());
</script>
</form>
</body>
</html>
Conclusion:-
In this article we have learned many concepts of Model in
Backbone.js. In coming article we will understand few more concept of Model in
Backbone.js