Question

我使用Backbone创建了一个广泛的应用程序。到目前为止，一切都运作良好。但是，当我在给定哈希（例如myapp /＃dashboard）上刷新/重新加载页面时，视图呈现两次，所有事件都被绑定两次。如果我去另一个部分然后回来。一切正常。

我使用的子程序如下：

var DashboardRouter = Backbone.SubRoute.extend({
    routes : {
        /* matches http://yourserver.org/books */
        "" : "show",
    },

    authorized : function() {
        // CODE TO RETRIEVE CURRENT USER ID ...
        return (lg);
    },

    show : function() {
        var usr = this.authorized();
        if (this.dashboardView) {
            this.dashboardView.undelegateEvents();
        }
        switch(usr) {
            case 2:
                this.dashboardView = new StudentDashboard();
                break;
            case 3:
                this.dashboardView = new CounsellorDashboard();
                break;
            case 4:
                this.dashboardView = new AdminDashboard();
                break;
            default:
                location.replace('#signout');
        }
    },
});

我在控制台中检查过，此处的事件只调用一次。学生仪表板看起来像这样（提取）

DashboardView = Backbone.View.extend({
    el : "#maincontent",
    template : tpl,
    model : new Student(),
    events : {
        "click #edit-dashboard" : "editDashboard",
        "click #add-grade" : "addGrade",
        "click #add-test" : "addTest",
        "click #add-eca" : "addECA"
    },
    initialize : function() {
        // BIND EVENTS
        _.bindAll(this, 'render', 'editDashboard', 'renderGrades', 'renderTests', 'renderECAs', 'renderPreferences');
        this.model.on("change", this.render);
        this.model.id = null;
        this.model.fetch({
            success : this.render
        });
    },

    render : function() {
        $(this.el).html(this.template(this.model.toJSON()));
        // set location variables after main template is loaded on DOM
        ...
        if (!this.gradeList) { this.renderGrades(); };
        if (!this.testList) { this.renderTests(); };
        if (!this.ecaList) { this.renderECAs(); };
        if (!this.preferencesView) { this.renderPreferences(); };
        this.delegateEvents();
        return this;
    },

从控制台日志中我知道所有子视图通常只渲染一次，但刷新页面时渲染两次，我不明白为什么。

Answer 1

在重新渲染视图之前，您需要确保视图中的所有事件都被取消。

在视图中添加以下功能。

cleanup: function() {
    this.undelegateEvents();
    $(this.el).empty();
}

现在，在渲染视图之前，在路由器中，如果视图已经存在，请进行清理。

if (this.myView) { this.myView.cleanup() };
this.myView = new views.myView();

页面刷新将骨干事件绑定两次

1 个答案: