In this article, we will understand the concept of view in Backbone.js
Demystify Backbone.js: View in Backbone.js-Part-8
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
Part:-7
In this article we will understand few more concepts of
“view” in Backbone.js. Try to understand below examples.
render property of view
“render” is one property of “View” in Backbone.js. It’s like
normal function in Backbone.js. when we call render property associated with
object in Backbone.js, it get call and execute the function associated with it.
In below example we have implemented sample “render” property in Backbone.js.
<%@ 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 person = Backbone.View.extend({
render: function (){
console.log('Render method called');
}
});
var p = new person();
p.render();
</script>
</form>
</body>
</html>
Here is output of above example.
template property of view
Like “render” property “template” is also another one. This
property is useful to load any inline or external template in Backbone.js view.
To implement template property we can use “underscore.js”. Here we are loading
one “<p>” tag to template property.
In this article we will learn the template property of
<%@ 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">
<p id="viewEL"></p>
<script>
var person = Backbone.View.extend({
el: 'viewEL',
template : _.template('<p> This is paragraph </p>'),
render: function (){
$('#' + this.el).html(this.template());
}
});
var p = new person();
p.render();
</script>
</form>
</body>
</html>
We are loading template property to “el” property and the
output is here.
tagName property in view
tagName property takes one DOM id or class identifier as
value and we can display template property into it.
<%@ 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"></p>
<script>
var person = Backbone.View.extend({
tagName:'viewEL',
template : _.template('<p> This is paragraph on tahName element</p>'),
render: function (){
$('#' + this.tagName).html(this.template());
}
});
var p = new person();
p.render();
</script>
</form>
</body>
</html>
Here is output of above example.
Conclusion
In this article we have learned few important properties of
“View” in Backbone.js. Hope you have enjoyed it. Happy Backbone learning.