Backbone.js 监听地图控制按钮的事件

Question

我正在使用 Bing 地图在我的网页上显示地图，该地图将在其上绘制地理位置数据。

我直接在我的 HTML 中添加了一些 UI 控件作为通用 UI 控制面板（并非所有都与 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>

我的页面看起来是这样的：

我创建了一个带有事件的 MapView，然后调用地图模型来放大或缩小等。

但是事件散列不起作用，我检查了控制台的日志消息但没有。

    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;
});

我是不是漏掉了什么？

Answer 1

缺少两件事。

el 应该是 '#navbar' bcz 无论你在事件中写什么，backbone 都会在 el 上分配处理程序，然后事件会传播到选择器。

由于您在 html 中添加了 id 作为唯一参数，因此事件中的选择器应该基于 id。

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

Backbone.js 监听地图控制按钮的事件

Backbone.js listening to events for Map control buttons

html

jquery

backbone.js

backbone-events