Backbone.js 监听 Map 控制按钮的事件答案

【问题标题】：Backbone.js listening to events for Map control buttonsBackbone.js 监听 Map 控制按钮的事件
【发布时间】：2015-05-18 15:56:30
【问题描述】：

我正在使用 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，然后调用 Map 模型来放大或缩小等。

但是事件哈希不起作用，我在控制台中检查了我的日志消息，但什么也没有。

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

我错过了什么吗？

【问题讨论】：

事件似乎与类选择器click .mapZoomOut绑定，虽然没有这样的类，你想试试像click #mapZoomOut这样的适当的id选择器吗？

标签： html jquery backbone.js backbone-events

【解决方案1】：

缺少两件事。

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

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

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

【讨论】：

谢谢，事后看来这是一个愚蠢的错误选择器。