[英]Backbone view with template not firing events
我在处理它的事件时遇到了一些问题。 他们根本不开火。 该视图的模板为 html,如下所示:
<script type="text/template" id="intro-slide-template">
<div class="slide intro" id="intro-slide">
<a href="#" class="startpresentation" id="start-btn">
<%= startpresentation %>
</a>
</div>
</script>
到目前为止,一切都很好。 视图代码本身看起来像这样:
/* ********* Slide View ********* */
window.IntroSlideView = Backbone.View.extend({
initialize: function(){
this.template = _.template($("#intro-slide-template").html());
},
render: function(){
$(this.el).html(this.template(this.model.toJSON()));
},
events: {
"click #start-btn": "clickHandler"
},
clickHandler: function() {
console.log("IntroSlideView :: clickHandler");
}
});
这就是我将幻灯片渲染到主应用程序视图的方式:
/* ********* App View ********* */
window.AppView = Backbone.View.extend({
el: $("#content"),
initialize: function(){
_.bindAll(this, 'render');
//render
this.render();
},
render: function(){
this.el.innerHTML = "";
var slide = this.model.get("currentSlide");
slide.render();
this.el.innerHTML = slide.el.innerHTML;
}
});
视图正在完美地呈现到屏幕上,并且它按预期工作。 但是点击事件没有触发。
当我检查幻灯片视图 object 时,我可以看到它确实有 el object 和正确的 HTML,包括必须触发点击事件的按钮。
当我记录视图的事件时,我看到它们已设置:
Object
click #start-btn: "clickHandler"
__proto__: Object
试试这个图案
window.AppView = Backbone.View.extend({
render: function() {
this.slide = new window.IntroSlideView({ el: this.$(".slide") });
// ...
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.