Backbone.js listening to events for Map control buttons

Issue

I am using Bing maps to display a map on my web page which will be plotting geo-location data on it.

I have added some UI controls directly in my HTML as a generic UI control panel (not all are relevant to MapView):

<div id="navbar" class="navbar-collapse collapse">
<a id="reloadMap" title="Refresh map" class="btn btn-primary" href="#"><span class="glyphicon glyphicon-repeat"></span></a>
<a id="legend" title="Display the Map legend" class="btn btn-primary" href="#"><span class="glyphicon glyphicon-tags"></span></a>
<a id="listView" title="See Engineers in a list" class="btn btn-primary" href="#"><span class="glyphicon glyphicon-list-alt"></span></a>
<a id="mapZoomOut" title="Zoom the map out" class="btn btn-primary" href="#"><span class="glyphicon glyphicon-zoom-out"></span></a>
<a id="mapZoomIn" title="Zoom the map in" class="btn btn-primary" href="#"><span class="glyphicon glyphicon-zoom-in"></span></a>
</div>

Which looks like so in my page:

I created a MapView with events that then calls the Map model to Zoom in or out etc.

However the events hash is not working and I checked the console for my log message but nothing.

    define([
    'jquery',
    'underscore',
    'backbone',
    'models/mapModel',
    'common'
], function ($, _, Backbone, Map, Common)
{
    'use strict';

    var MapLayer = Backbone.View.extend({


        el: '', // the element is set in the model when calling Bing maps

        // The DOM events specific to an item.
        events: {
            'click .mapZoomOut': 'mapZoomOut',
            'click .mapZoomIn': 'mapZoomin',
            'click .reloadMap': 'initialize'
        },

        model: null,
        

        /**
         @name constructor
         @method initialise
        **/
        initialize: function ()
        {
            
            this.model = new Map();
        },



        /**
         Tell the Map model to zoom out after pressing zoomout key
         @method mapZoomOut
        **/
        mapZoomOut: function ()
        {
            console.log("Zoom out");
            this.model.zoomOut();
        },

        /**
         Tell the Map model to zoom in after pressing zoomout key
         @method mapZoomIn
        **/
        mapZoomIn: function ()
        {
            console.log("Zoom in");
            this.model.zoomIn();
        },
    
    });

    return MapLayer;
});

Have I missed something out?

Solution

Two things are missing.

1. el should be '#navbar' bcz whatever you are writing in events, backbone gonna assign handler on el and then events gonna propagate to selectors.

2. Since you have added id inside html as unique parameter so selector inside events should be id based.

               el: '#navbar'
               events: {
                   'click #mapZoomOut': 'mapZoomOut',
                   'click #mapZoomIn': 'mapZoomin',
                   'click #reloadMap': 'initialize'
               },
   

Answered By - Prashant Sharma