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

})

イベント機能の1つを削除しました。それは重要ではなかったからです。とにかく、このビューは私のルーターで初期化されています：

    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,

しかし、それはaを作成しません _this オブジェクトのスコープでは、デフォルトを作成するだけです this._this あなたのビューインスタンスのために;さらに、MapModalviewが構築されているとき、 this おそらくそうなるでしょう window だからあなたがしているのは、各MapModalviewにの参照を与えることだけです window の this._this.

みんなだと思います _this 参照はあるべきです this そしておそらくあなたは追加したい：

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

MapModalview'sに initialize これら2つが常に正しいことを確認する方法 this あなたがそれらを呼ぶとき。

---

そして今、根本的な問題のために、ほとんど機能的なコードがあります。

バックボーンビューには el:

すべてのビューには、ページに既に挿入されているかどうかにかかわらず、常にDOM要素（ELプロパティ）があります。

そして、彼らは持っています $el:

ビューの要素のキャッシュされたjQuery（またはZepto）オブジェクト。

delegateEvents メソッド演算子 this.$el. 。あなたは指定しません el （また id, tagName, 、...）あなたの見解の定義の一部として、バックボーンはあなたの初期化 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/