Backbone.js事件未启动
Backbone.js Events not firing
我有一个可以加载的视图。然而,事件并没有发生。以下是视图:
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 & 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 & Access Info" id="modal_parking">Parking & Access Info</a></li>
</ul>
<div id="modalMap"></div>
</div>
</script>
当然,我正在处理的页面上的HTML标记:
<div class="modal_box"></div>
我在任何地方都没有定义任何_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
:
所有视图始终都有一个DOM元素(el属性),无论它们是否已经插入到页面中。
并且它们具有CCD_ 14:
视图元素的缓存jQuery(或Zepto)对象。
CCD_ 16上的CCD_ 15方法运算符。您没有指定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/
试试这个:
render: function() {
$(this.el).show().append(this.template({
model: this.model
}));
this.renderMap();
this.renderPin();
this.delegateEvents();
},
- 从控制器返回后Ajax启动事件激发
- 触摸启动事件未在iframe iOS 6中启动
- preventDefault之后的重新启动事件
- 如何获取在一系列事件中启动事件的元素
- 当窗口打开时,IE9在加载前启动事件
- 我的 JS 代码中的会话启动事件
- 仅当前一个事件完全完成时,才启动事件
- jQuery UI - 如何区分拖动/调整大小启动事件和单击事件
- Javascript “卡住”键(未注册的键启动事件)
- pace.js:“启动”事件未触发
- 在第一次触摸启动事件时禁用所有点击事件是个好主意吗?
- 如何将“拖动启动”事件与 CKEditor 实例分离
- 触摸启动事件上的Javascript触发函数
- 绑定到触摸启动事件,导致自动对焦集中在Mobile Safari中的任何单击上
- 触摸启动事件未在原来隐藏的按钮上工作
- 有没有一种方法可以使触摸启动事件不会触发点击事件
- 检测浏览器窗口是否处于活动状态,并在窗口再次处于活动状态后启动事件[JavaScript]
- 如何检测浏览器是否支持手势启动事件
- 首先启动事件,然后转到url
- 在IE7中无法捕获鼠标启动事件