Introduction
In this article, I will create an application to increase or decrease the numbers using events in backbone.js. Here, we create two buttons; one is to increment the numbers, and the other is to decrement the numbers.
We need to add these script files.
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
Now, we will create the application.
Step 1
- Start Visual Studio 2013.
- From the Start window, select "New project".
- Select "Installed" -> "Template" -> "Visual C#" -> "Web" -> "Visual Studio 2012"and select "ASP.NET" Web Application.
![create Web Application]()
- Click on the "OK" button.
Step 2. Now, add an HTML page to the project.
- In the Solution Explorer.
- Right-click on the project and select "Add" -> "HTML page".
![create Web Application]()
- Change the name of the page.
![Change Name of the Page]()
- Click on the "OK" button.
Add the following code.
<!DOCTYPE html>
<html>
<head>
<title>BACKBONE Tutorial 2: Events</title>
<!-- requirements. -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="main.js"></script>
<style>
p#num {
font-size: 34px;
font-weight: bold;
color: #0094ff;
}
button#increment_button {
background: #12161e;
color: #fff;
font-size: 15pt;
}
button#decrement_button {
background: #12161e;
color: #fff;
font-size: 15pt;
font-weight: bold;
}
</style>
</head>
<body>
<div id="num_holder"></div>
<script type="text/template" id="num-template">
<div id="buttons">
<button name='increment_button' id='increment_button'>Click for Increase Number</button>
<button name='decrement_button' id='decrement_button'>Click for Decrease Number</button>
</div>
<p id="num"><%= num %></p>
</script>
</body>
</html>
In the code above, we declare two buttons; one is for increasing the value, and the second is for decreasing the value.
Step 3. Now, we add a JavaScript file.
- In the Solution Explorer.
- Right-click on the project, then select "Add" -> "New Item" -> "JavaScript".
![Add javascript file]()
- Click on the "Add" button.
Add the following code.
$(document).ready(function () {
// A simple Counting model
var Number = Backbone.Model.extend({
defaults: {
num: 0
},
increment: function () {
this.set('num', this.get('num') + 1);
},
decrement: function () {
this.set('num', this.get('num') - 1);
}
});
var NumberView = Backbone.View.extend({
initialize: function () {
this.model.on('change', this.render, this);
},
// This connects events on DOM elements (WITHIN THE VIEW--IMPORTANT!)
// to methods specified in this View.
events: {
"click #increment_button": 'increment',
"click #decrement_button": 'decrement'
},
// It would be nice if you could just pass model methods to the backbone events hash...
increment: function () {
this.model.increment();
},
decrement: function () {
this.model.decrement();
},
// Show it!
render: function () {
$(this.el).html(_.template($('#num-template').html(), { num: this.model.get('num') }));
return this;
}
});
var myNumber = new Number();
var myNumberView = new NumberView({ model: myNumber, el: '#num_holder' });
myNumberView.render();
});
Step 4. Execute the application. Two buttons will be displayed, as shown below.
![Display two buttons]()
When we click on "Click for Increase Number" then the number will be increased.
![Increase Number]()
If we click on the "Click for Decrease Number" then the number will be decreased.
![Decrease Number]()