Javascript 主干视图事件未触发
我有一个模态对话框类,我正在扩展它,以显示带有一些按钮的窗体。以下是ModalView视图:Javascript 主干视图事件未触发,javascript,backbone.js,Javascript,Backbone.js,我有一个模态对话框类,我正在扩展它,以显示带有一些按钮的窗体。以下是ModalView视图: App.ModalView = Backbone.View.extend({ events: { "click .dismiss": "dismiss" }, element: "<section class='modal'><div class='overlay'></div><div class='content'&g
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();
}
});
以下是模板:
<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>
由于某些原因,当我单击该按钮时,Disclease事件从不触发。这是怎么回事?如果没有正确的代码,我只能猜测, 但是这种错误通常是因为在dom准备就绪之前声明了视图的代码 您能告诉我们您在哪里启动应用程序吗 它是否在jquery文档就绪函数中
$(function(){
this.addRecordView = new App.views.addRecord({
model: this.model,
css: {
width: "400px"
}
});
});
您尚未为视图定义el或标记名。如果未声明上述任何一项,则主干默认情况下会将委托事件分配给div。然后在initialize函数中显式设置el,使用附加的EventHandler覆盖el。尝试将节设置为标记名,并将其从元素属性中删除。然后将元素附加到this.el。
很抱歉没有提供代码示例,但我正在手机上书写 它是由另一个视图的方法创建的,它是由按钮上的单击事件触发的,因此我知道DOM已经准备好了。好吧,很抱歉我的快速假设,我之前多次遇到这个问题,每次都是上面的解决方案解决的。我明天会看一看,看能不能找到一个好主意。我会试试看。这是两个问题之一。问题2:主干事件在扩展()时不会从一个视图继承到另一个视图。如果要复制super的事件,则必须在子视图上声明重复的事件,或者将events属性声明为返回事件哈希的函数,然后在子元素上调用super。例如,App.AddRecordView.events=function(){return$.extend(App.ModalView.prototype.events.call(this),{“click.save”:“saveRecord”};}和App.ModalView.events=function(){return{“click.disease”:“disease”}
this.addRecordView = new App.views.addRecord({
model: this.model,
css: {
width: "400px"
}
});
$(function(){
this.addRecordView = new App.views.addRecord({
model: this.model,
css: {
width: "400px"
}
});
});