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

Step 2. Now, add an HTML page to the project.

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.

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