Javascript 主干视图事件未触发

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

我有一个模态对话框类,我正在扩展它,以显示带有一些按钮的窗体。以下是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();
    }
});
以下是模板:

<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"
        }
    });
});