2

ロードできるビューがあります。ただし、イベントは発生しません。ビューは次のとおりです。

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>
4

2 に答える 2

3

どこにも定義されていないので、呼び出すとすぐにすべての実行が停止し、イベントが何も_this実行されなくなると予想されます。renderMap

私はこれを見ます：

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

ただし、それは_thisオブジェクトのスコープに を作成せずthis._this、ビュー インスタンスのデフォルトを作成するだけです。さらに、MapModalView が構築されているときは、thisおそらくwindow、各 MapModalView に in への参照を与えるだけwindowですthis._this。

私はあなたのすべての_this参照があるべきだと思いますthis、そしておそらくあなたは追加したいと思うでしょう:

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

MapModalView のメソッドに追加して、呼び出すときにinitializeこれら 2 つが常に正しいことを確認します。this

そして、根本的な問題について説明します。これで、ほとんど機能するコードが得られました。

バックボーン ビューには次のものがありますel。

すべてのビューには、ページに既に挿入されているかどうかに関係なく、常に DOM 要素 (el プロパティ) があります。

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

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

のdelegateEventsメソッド演算子this.$el。elビューの定義の一部として an (or id, , ...) を指定しないtagNameため、Backbone は yourelを空に初期化し<div>、次に を初期化しますthis.$el = $(this.el)。コンストラクターの変更this.el:

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

しかし、あなたは何もしないthis.$elので、まだ空のを参照しています<div>。delegateEventsusesとthatthis.$elは有用なものを指していないので、イベントが DOM 内の何かにバインドされないように注意してください。

this.el内に設定することを主張する場合は、同様initializeに設定する必要があります。this.$el

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

デモ: http://jsfiddle.net/ambiguous/D996h/

またはsetElement()、setelと$elfor you を使用することもできます。

通常のアプローチは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/

于 2012-02-22T00:08:03.750 に答える
1

これを試して：

render: function() {
    $(this.el).show().append(this.template({
        model: this.model
    }));
    this.renderMap();
    this.renderPin();
    this.delegateEvents();
},
于 2012-02-22T01:01:39.853 に答える