Javascript Backbone.js事件未触发

我有一个可以加载的视图。然而，这些事件并没有发生。以下是视图：

MapModalView = Backbone.View.extend({
events: {
    'click #closeMapModal': 'closeModal',
    'click #modal_streetview': 'renderStreet'
},
initialize: function(){
    this.el = $('.modal_box');
    this.template = _.template($('#map-modal-template').html());
    _.bindAll(this, 'renderMap', 'renderPin');
},

render: function(){
    $(this.el).show().append(this.template({
        model: this.model
    }));
    this.renderMap();
    this.renderPin();
},
renderMap: function(){
    this.thisLat = _this.model.get('lat');
    this.thisLng = _this.model.get('lng');
    this.modalMap = new google.maps.Map(document.getElementById('modalMap'), {
        zoom : 12,
        center : new google.maps.LatLng(this.thisLat, this.thisLng), // VANCOUVER
        mapTypeId : google.maps.MapTypeId.ROADMAP
    });
},
renderPin: function(){
    marker = new google.maps.Marker({
        position : new google.maps.LatLng(this.thisLat, this.thisLng),
        map : this.modalMap,
        animation : google.maps.Animation.DROP,
        icon : '/img/lazy-pin.png'
    });        
},
renderStreet: function(e){
    e.preventDefault();
    this.modalMap.getStreetView().setPosition(this.modalMap.center);
    this.modalMap.getStreetView().setVisible(true);
},
closeModal: function(e){
    alert('hello');
    e.preventDefault();
    $(this.el).hide().find('div').remove();
}

})

我删除了一个事件函数，因为它不重要。无论如何，此视图在我的路由器中初始化：

    this.mapModalView = new MapModalView();

我有一个工具提示视图，里面有一个事件，从ModalMapView调用render函数。这是一种观点：

ToolTipView = Backbone.View.extend({
initialize: function() {
    this.template = _.template($('#toolTip').html());
    this.mapTemplate = _.template($('#map-modal-template').html());
    this.model.bind('change:tooltip', this.toggleTooltip, this);
    return this;
},

events: {
    'mouseenter': 'toolTipOn',
    'mouseleave': 'toolTipOff',
    'click #show-restaurant-map': 'mapModal'
},

mapModal: function(){
    router.mapModalView.render(this.model);
},

render: function() {
    $(this.el).html(this.template({
        model: this.model
    }));
    this.delegateEvents();
    return this;

}

}))

我删除了上面我认为不再重要的功能

另外，这是我的模板：

<script type="text/template" id="map-modal-template">
<div id="map_modal">
    <button title="Close" id="closeMapModal" class="right">Close</button>
    <h3>Restaurant Map &amp; Access Information</h3>
    <ul>
        <li><a href="#" title="Map View" id="modal_mapview">Map</a></li>
        <li><a href="#" title="Street View" id="modal_streetview">Street View</a></li>
        <li><a href="#" title="Parking &amp; Access Info" id="modal_parking">Parking &amp; Access Info</a></li>
    </ul>
    <div id="modalMap"></div>
</div>
</script>

接近
餐厅地图及；访问信息

当然，我正在处理的页面上的HTML标记：

<div class="modal_box"></div>

---

我看不到任何

\u该
定义在任何地方，因此我希望在您调用
renderMap
时，一切都停止运行，这将阻止您的事件执行任何操作

我确实看到了这一点：

MapModalView = Backbone.View.extend({
    //...
    _this: this,

但这不会在对象的范围内创建一个
\u this
，它只会为视图实例创建一个默认的
this；此外，在构建MapModalView时，
此
可能是
窗口
，因此您所做的就是在
中为每个MapModalView提供对
窗口
的引用

我认为您所有的
\u this
引用都应该是
this
，也许您想添加：

_.bindAll(this, 'renderMap, 'renderPin');

映射ModalView的
initialize
方法，以确保在调用这两个方法时始终使用正确的
this


现在是基本问题，我们有了大部分功能代码

主干视图具有以下功能：

所有视图在任何时候都有一个DOM元素（el属性），不管它们是否已经插入到页面中

他们有一个：

视图元素的缓存jQuery（或Zepto）对象

this.$el
上的方法运算符。您没有将
el
（或
id
，
标记名
，…）指定为视图定义的一部分，因此主干将
el
初始化为空的
，然后初始化
此。$el=$（this.el）
。您的构造函数更改此.el
：

this.el = $('.modal_box');

但是您不需要使用
这个。$el
所以它仍然引用空的
。请记住，
delegateEvents
使用了
this.$el
，它没有指向任何有用的内容，因此事件不会绑定到DOM中的任何内容

如果您坚持在
初始化中设置
this.el
，那么您还必须设置
this.$el
：

initialize: function() {
    this.el  = '.modal_box';
    this.$el = $(this.el);
    //...

演示：

或者您可以使用设置
el
和
$el

通常的方法是将
el
设置为视图定义的一部分：

MapModalView = Backbone.View.extend({
    el: '.modal_box',
    //...

演示：

或者，您可以在实例化视图时将
el
传递给视图：

m = new MapModalView({el: '.modal_box'});
m.render();

演示：
我看不到任何
\u该
定义在任何地方，因此我希望在您调用
renderMap
时，一切都停止运行，这将阻止您的事件执行任何操作

我确实看到了这一点：

MapModalView = Backbone.View.extend({
    //...
    _this: this,

但这不会在对象的范围内创建一个
\u this
，它只会为视图实例创建一个默认的
this；此外，在构建MapModalView时，
此
可能是
窗口
，因此您所做的就是在
中为每个MapModalView提供对
窗口
的引用

我认为您所有的
\u this
引用都应该是
this
，也许您想添加：

_.bindAll(this, 'renderMap, 'renderPin');

映射ModalView的
initialize
方法，以确保在调用这两个方法时始终使用正确的
this


现在是基本问题，我们有了大部分功能代码

主干视图具有以下功能：

所有视图在任何时候都有一个DOM元素（el属性），不管它们是否已经插入到页面中

他们有一个：

视图元素的缓存jQuery（或Zepto）对象

this.$el
上的方法运算符。您没有将
el
（或
id
，
标记名
，…）指定为视图定义的一部分，因此主干将
el
初始化为空的
，然后初始化
此。$el=$（this.el）
。您的构造函数更改此.el
：

this.el = $('.modal_box');

但是您不需要使用
这个。$el
所以它仍然引用空的
。请记住，
delegateEvents
使用了
this.$el
，它没有指向任何有用的内容，因此事件不会绑定到DOM中的任何内容

如果您坚持在
初始化中设置
this.el
，那么您还必须设置
this.$el
：

initialize: function() {
    this.el  = '.modal_box';
    this.$el = $(this.el);
    //...

演示：

或者您可以使用设置
el
和
$el

通常的方法是将
el
设置为视图定义的一部分：

MapModalView = Backbone.View.extend({
    el: '.modal_box',
    //...

演示：

或者，您可以在实例化视图时将
el
传递给视图：

m = new MapModalView({el: '.modal_box'});
m.render();

演示：
试试这个：

render: function() {
    $(this.el).show().append(this.template({
        model: this.model
    }));
    this.renderMap();
    this.renderPin();
    this.delegateEvents();
},

试试这个：

render: function() {
    $(this.el).show().append(this.template({
        model: this.model
    }));
    this.renderMap();
    this.renderPin();
    this.delegateEvents();
},

仅供参考，我已经使用主干大约2个月了，所以我在这方面还是新手。我应该提到，closeMapModal是一个不触发的事件（因此警报），我还应该添加，似乎这些元素没有分配给它们的事件。。。问题是，为什么？仅供参考，我已经使用主干大约2个月了，所以我在这方面还是新手。我应该提到，closeMapModal是一个不触发的事件（因此警报），我还应该添加，似乎这些元素没有分配给它们的事件。。。问题是，为什么？\这是在做它的工作，但我确实按照您的方式更改了所有内容，我将更新我的代码，但是这并不能解决事件问题\这是在做它的工作，但我确实将所有内容更改为yo