In this article we will learn events in backbone.js
Demystify Backbone.js: Event in Backbone.js –Part-16
This is “Demystify Backbone.js” article series. In the previous
articles of this series we have learned various concepts of Backbone.js. You
can read them here.
Part-1
Part-2
Part-3
Part-4
Part-5
part -6
Part:-7
Part:-8
Part:-9
Part:10
Part:-11
Part:-12
Part:-13
Part:-14
Part:-15
In previous three articles (Part 13,14,15) we have learned to bind event in
JavaScript object, Model and collection in Backbone.js. In this article we will
learn to bind event with view. We know that view in Backbone.js is used to
display and rendering operation.
Button click event of View template
The view can able to import template from internal DOM or
from external HTML file. In this example we have created one template which
contains one button and we are importing this template within view of
Backbone.js. Have a look on below code.
<%@ 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">
<div id="container-temp">
<input type="button" id="btnClick" value="Click Me" />
</div>
<script>
var TestView = Backbone.View.extend({
el: "#container-temp",
initialize: function () {
},
events: {
"click #btnClick": "clickButton"
},
clickButton: function (event) {
console.log('Someone has clicked on Button');
}
})
var v = new TestView();
</script>
</form>
</body>
</html>
Text change event of view template
In previous example we seen click event of button. In this
example we will understand the text change event of textbox. This is sample
code for that.
<%@ 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">
<div id="container-temp">
Enter your name:- <input type="text" id="txtName" />
</div>
<script>
var TestView = Backbone.View.extend({
el: "#container-temp",
initialize: function () {
},
events: {
"change #txtName": "textChange"
},
textChange: function (event) {
console.log(event);
console.log('Text has changed in Text box');
}
})
var v = new TestView();
</script>
</form>
</body>
</html>
The text change event will occur when we will write
something into text box. Here is output of above example.
Execute click event of button using class
In first example we have used id of button to track click
event onto it. In some situation it might necessary to trigger same callback
function for multiple elements. In this
scenario we can use class in place of ID. Here is sample implementation of
that.
<%@ 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">
<div id="container-temp">
<input type="button" class="btn" value="Button1" />
<input type="button" class="btn" value="Button2" />
</div>
<script>
var TestView = Backbone.View.extend({
el: "#container-temp",
initialize: function () {
},
events: {
"click .btn": "clickButton"
},
clickButton: function (event) {
console.log(event);
//console.log('Text has changed in Text box');
}
})
var v = new TestView();
</script>
</form>
</body>
</html>
Conclusion:-
In this article we have learned to trigger event from view
in Backbone.js. The main object is that, we have to bind particular event with
some element within view. Hope you understood and following the series.