我有一个模态对话框类,我正在扩展它以显示带有一些按钮的表单。这是ModalView视图:
App.ModalView = Backbone.View.extend({
events: {
"click .dismiss": "dismiss"
},
element: "<section class='modal'><div class='overlay'></div><div class='content'></div></section>",
initialize: function () {
this.el = $(this.element);
this.setupElement();
this.bindContext();
this.extendEvents();
this.render();
this.miscellaneous();
},
bindContext: function () {
_.bindAll(this, "dismiss", "render", "setBoxStyle");
},
setupElement: function () {
this.template = $("#modal-template");
},
miscellaneous: function () {},
extendEvents: function () {},
render: function () {
$(this.el).find(".content").html(this.template.html());
$("body").append(this.el);
this.setBoxStyle();
if (this.options.content) {
$(this.el).find(".content").html(this.options.content);
}
},
getMargin: function (width, height) {
var top, left;
width = parseFloat(width);
height = parseFloat(height);
top = Math.max(0, Math.round((window.innerHeight - height) / 2));
left = Math.max(0, Math.round((window.innerWidth - width) / 2));
return top + "px " + left + "px";
},
setBoxStyle: function () {
var css = this.options.css || {};
var el = $(this.el).find(".content");
el.css(css);
var width = el.outerWidth();
var height = el.outerHeight();
css.margin = this.getMargin(width, height);
el.css(css);
},
dismiss: function () {
this.remove();
}
});
这是扩展视图:
App.AddRecordView = App.ModalView.extend({
setupElement: function () {
this.template = $("#add-record-template");
}
});
以下是模板:
<script type="text/template" id="add-record-template">
<h1>Add Record</h1>
<button class="green save">Save Record</button>
<button class="cancel dismiss">Cancel</button>
</script>
以下是我初始化视图的方法:
this.addRecordView = new App.views.addRecord({
model: this.model,
css: {
width: "400px"
}
});
出于某种原因,当我点击按钮时,解雇事件永远不会触发。这是怎么回事?
答案 0 :(得分:4)
您尚未为视图定义el或tagName。如果没有声明上述任何一个,Backbone默认情况下会将委托事件分配给div。在初始化函数中,然后显式设置el,覆盖附加了事件处理程序的el。尝试将您的部分设置为tagName并将其从您的元素属性中删除。然后将你的元素追加到this.el. 很抱歉没有提供代码示例,但我正在手机上写字。
答案 1 :(得分:0)
没有正确的代码,我只能猜到, 但是这种错误通常是因为你的视图代码是在dom准备好之前声明的。
你能告诉我们你开始申请的地方吗?
是否在jquery文档就绪函数中?
$(function(){
this.addRecordView = new App.views.addRecord({
model: this.model,
css: {
width: "400px"
}
});
});