Backbone 视图事件在附加到元素的顶层 class 时未触发
Backbone view events are not firing when attached to top level class of the element
我有一个附加到视图的点击事件,该视图的 el 是使用 className 和 tagName 定义的。呈现此视图后,不会触发 className 选择器的点击事件。
以下是我的看法-
define([
'jquery',
'underscore',
'backbone',
'models/MovieModel',
'text!templates/movieTemplate.html'
],function($,_,Backbone,Moviemodel,movieTemplate){
var Moviesview= Backbone.View.extend({
tagName:'div',
className:'box',
events : {
'click .box': 'boxClicked'
},
boxClicked: function(){
alert('world');
},
initialize: function(){
},
render: function(){
var data= {moviemodel: this.model.toJSON(), _:_ };
var compiledTemplate =_.template(movieTemplate);
compiledTemplate= compiledTemplate(data);
this.$el.html(compiledTemplate);
return this;
}
});
return Moviesview;
});
正在从另一个视图调用此视图-
define([
'jquery',
'underscore',
'backbone',
'models/MovieModel',
'views/movieview',
'views/detailedmovieview'
], function ($, _, Backbone, Moviemodel, Movieview, Detailedmovieview) {
var Movieslistview = Backbone.View.extend({
el: $('.content'),
initialize: function () {
var that = this;
this.collection.fetch({
success: function (collection, response) {
that.render();
},
error: function () {
alert('failed!');
}
});
},
render: function () {
this.collection.each(function (row) {
var temp = new Movieview({
model: row
});
this.$el.append(temp.render().el);
}, this);
return this;
}
});
return Movieslistview;
});
这里使用的模板-
<div class='main-content'>
<div class="actors">
<div class="actors-label">Actors:</div>
<div class="actors-name"><%= moviemodel.actor_1_name %></div>
</div>
<div class="additional-info">
</div>
</div>
.main-content 和 .additional-info 的点击事件正确触发,但 .box 的点击事件不正确.
为了将事件附加到视图元素,您的事件绑定应该是:
events : {
'click': 'boxClicked'
},
我有一个附加到视图的点击事件,该视图的 el 是使用 className 和 tagName 定义的。呈现此视图后,不会触发 className 选择器的点击事件。
以下是我的看法-
define([
'jquery',
'underscore',
'backbone',
'models/MovieModel',
'text!templates/movieTemplate.html'
],function($,_,Backbone,Moviemodel,movieTemplate){
var Moviesview= Backbone.View.extend({
tagName:'div',
className:'box',
events : {
'click .box': 'boxClicked'
},
boxClicked: function(){
alert('world');
},
initialize: function(){
},
render: function(){
var data= {moviemodel: this.model.toJSON(), _:_ };
var compiledTemplate =_.template(movieTemplate);
compiledTemplate= compiledTemplate(data);
this.$el.html(compiledTemplate);
return this;
}
});
return Moviesview;
});
正在从另一个视图调用此视图-
define([
'jquery',
'underscore',
'backbone',
'models/MovieModel',
'views/movieview',
'views/detailedmovieview'
], function ($, _, Backbone, Moviemodel, Movieview, Detailedmovieview) {
var Movieslistview = Backbone.View.extend({
el: $('.content'),
initialize: function () {
var that = this;
this.collection.fetch({
success: function (collection, response) {
that.render();
},
error: function () {
alert('failed!');
}
});
},
render: function () {
this.collection.each(function (row) {
var temp = new Movieview({
model: row
});
this.$el.append(temp.render().el);
}, this);
return this;
}
});
return Movieslistview;
});
这里使用的模板-
<div class='main-content'>
<div class="actors">
<div class="actors-label">Actors:</div>
<div class="actors-name"><%= moviemodel.actor_1_name %></div>
</div>
<div class="additional-info">
</div>
</div>
.main-content 和 .additional-info 的点击事件正确触发,但 .box 的点击事件不正确.
为了将事件附加到视图元素,您的事件绑定应该是:
events : {
'click': 'boxClicked'
},