我有一个骨干视图,为每个传递给它的模型创建一个新的div.但是,我无法在视图上触发任何类型的事件(单击a.change-status),我认为这是因为它内部的元素也是从模板生成的.如果有一些解决方法,请告诉我.
var videoDivView = Backbone.View.extend({
el: '<div class="vendor-video" />',initialize: function(){
_.bindAll(this);
this.render();
this.model.on('change:published',this.enableSaveButton);
},events: {
'click a.change-status' : 'changeVideoStatus'
},template: video_tmpl,render: function(){
this.$el.attr("id",'video-'+this.model.id);
this.$el.html(this.template(this.model.toJSON()));
this.$el.data('status',video_statuses[this.model.get('published')]);
},changeVideoStatus: function(e) {
console.log(this.model);
return false;
},enableSaveButton: function() {
$('#save-changes').removeClass('disabled').removeAttr('disabled');
}
});
示例模板看起来像：
<script id="single-video-tmpl" type="text/x-jquery-tmpl">
<div>
<div class="video-info">
<span class="video-title"><%=video_title%></span>
<div class="bottom-info">
<a href="#<%=id%>" class="change-status"></a>
</div>
</div>
</div>
</script>
解决方法
有些事情可能是导致问题的原因.
首先,你的声明似乎是可疑的.如果你想要一个具有该类的div,你只需要定义className属性,因为骨干视图的默认值是div.
而不是：el：’< div class =“vendor-video”/>‘
只需使用：className：’vendor-video’
我没有看到有关视图初始化方法的任何详细信息,但最佳做法是初始化视图,然后将其呈现给容器：
var yourVideoDivView = new videoDivView({model: model});
$("#your-video-container").html(yourVideoDivView.render().el)
为了得到最后一行,你必须返回这个;在你的渲染方法上.
render: function(){
...
return this;
}
关于使用this.delegateEvents(),你应该在你的视图已经在DOM中之后调用这个函数,否则没有意义.即：
$("#your-video-container").html(yourVideoDivView.render().el)
yourVideoDivView.delegateEvents();
delegateEvents()将使您的视图事件再次活动.
