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>

在我的页面中看起来如此

enter image description here

我创建了一个带有事件的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;
});

我错过了什么吗？

Answer 1

缺少两件事。

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

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

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

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

1 个答案: