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調用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>

Answer 1

我在任何地方都看不到任何_this定義，因此我希望一切一旦您調用renderMap就會停止運行，這將阻止您的事件執行任何操作。

我確實看到了：

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

但這不會在對象范圍內創建_this ，而只會為您的視圖實例創建默認的this._this 。 此外，當正在修建MapModalView， this將可能是window因此，所有你正在做的是給每個MapModalView一個參考window中this._this 。

我認為您所有的_this引用都應該是this ，也許您想添加：

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

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

---

現在，對於潛在的問題，我們主要使用功能代碼。

骨干網視圖有一個el ：

所有視圖始終都具有DOM元素（el屬性），無論它們是否已經插入到頁面中。

他們有一個$el ：

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

this.$el上的delegateEvents方法運算符。 您沒有在視圖定義中指定el （或id ， tagName ，...），因此Backbone將el初始化為空的<div> ，然后初始化this.$el = $(this.el) 。 您的構造函數將更改this.el ：

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

但是您對this.$el不執行任何操作，因此它仍然引用空的<div> 。 請記住， delegateEvents使用this.$el ，但這並不指向任何有用的東西，因此您的事件不會綁定到DOM中的任何東西。

如果您堅持要在initialize設置this.el ，那么還必須設置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/

Answer 2

嘗試這個：

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