In this article we will understand the concept of view in Backbone.js
Demystify Backbone.js: View in Backbone.js-Part-7
This is Backbone.js article series. In this series we are
learning Backbone.js from scratch. We have discussed the concepts of Model and
Collection in Backbone.js, you can read them here.
Part-1
Part-2
Part-3
Part-4
Part-5
part -6
In this article we will understand few more concepts of
“view” in Backbone.js. Try to understand below examples.
Define function within view
We can define any function within “view” in Backbone.js. In
below example we have defined “myfunction” within “TestView” view then we are
calling this “myfunction” function from initialize constructor. Here is sample
implementation.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<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 TestView = Backbone.View.extend({
initialize: function () {
this.myfunction();
},
myfunction: function () {
console.log('Call by initialize constructor');
}
});
var myview = new TestView();
</script>
</form>
</body>
</html>
This is output of above example.
Print model data within View’s method
In above example we have learned to implement function
within “view”. In this example we will print Model data within “view”. If you
know the concept of Model in Backbone.js then you will understand easily.
<%@ 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">
<p id="viewEL">This is paragraph element</p>
<script>
var person = Backbone.Model.extend({
defaults: {
name: '',
surname:''
}
});
var TestView = Backbone.View.extend({
initialize: function () {
var p = new person({ name: 'Sourav', surname: 'Kayal' })
this.myfunction(p);
},
myfunction: function (Model) {
console.log(Model.get('name'));
console.log(Model.get('surname'));
}
});
var myview = new TestView();
</script>
</form>
</body>
</html>
We are creating object of person Model within initialize
constructor of “TestView” view. Then we are calling “myfunction” and passing
the Model object as argument.
Print collection using view’s function
Like above example we can pass a Collection of Backbone.js
Mode as function parameter. This example is very similar with previous one.
<%@ 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">
<p id="viewEL">This is paragraph element</p>
<script>
var person = Backbone.Model.extend({
defaults: {
name: '',
surname:''
}
});
var TestView = Backbone.View.extend({
initialize: function () {
//create object of person model
var p1 = new person({ name: 'Sourav', surname: 'Kayal' })
var p2 = new person({ name: 'Ajay', surname: 'Joshi' })
var persocollection =
Backbone.Collection.extend({
model:person
});
//create object of persocollection Collection
var p = new persocollection();
p.add(p1);
p.add(p2);
this.myfunction(p);
},
myfunction: function (Collection) {
//Traverse all element using each method
Collection.each(function (object) {
console.log(object.get('name') +' ' + object.get('surname'));
});
}
});
var myview = new TestView();
</script>
</form>
</body>
</html>
Here is output of above example.
Conclusion:-
In this article we have learned to work with Model data
within view in Backbone.js. This is very important to implement single page
application suing Backbone.js. In coming article we will discuss few more
concepts.