Backbone.js未開火的事件

Question

我有一個視圖我可以加載。但事件不會觸發。下面是這個視圖：

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渲染功能。這裏是查看：

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> 

Answer 1

試試這個：

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

Answer 2

我沒有看到任何_this任何地方定義，因此我希望一旦你撥打renderMap就立即停止運行，這會阻止你的事件做任何事情。

我看到這一點：

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

但這並不創建對象的範圍_this，剛剛創建的視圖實例默認this._this;此外，在構建MapModalView時，this可能爲window，因此，您所做的只是爲每個MapModalView提供this._this中的window的引用。

我認爲所有的_this引用應該是this，也許你想添加：

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

到MapModalView的initialize方法，以確保這兩個始終有正確的this當你給他們打電話。

---

現在對於現在我們主要有功能代碼的底層問題。

骨幹觀點有el：

所有意見必須在所有時間（el的屬性）DOM元素，它們是否已經被插入到網頁或沒有。

並且它們具有一個$el：

甲緩存jQuery的（或的Zepto）對象視圖的元件。

delegateEvents方法運算符this.$el。作爲視圖定義的一部分，您沒有指定el（或id，tagName，...），因此Backbone將您的el初始化爲空<div>，然後初始化this.$el = $(this.el)。你的構造變化this.el：

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

但你沒有做任何事情this.$el所以它仍然是指空<div>。請記住，delegateEvents使用this.$el，這並不指向任何有用的東西，因此您的事件不會綁定到DOM中的任何內容。

如果硬要設置this.el您initialize裏面，那麼你就必須設置this.$el還有：

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

演示：http://jsfiddle.net/ambiguous/D996h/

或者你可以使用setElement()設置el和$el爲您。

通常的做法是設置el作爲視圖定義的一部分：

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

演示：http://jsfiddle.net/ambiguous/NasSN/

或者你也可以通過el到視圖當實例吧：

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

演示：http://jsfiddle.net/ambiguous/9rsdC/