Post
Ask Question

Increment and Decrement of Numbers Using Event in Backbone.js

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


Similar Articles