骨干视图未被删除

Question

我有一个骨干应用程序，用户点击按钮并显示一个模态。

在关闭模态时，我会执行以下操作，

$('#myModal').on('hidden.bs.modal', function () {
        self.remove();
        App.Routes.Application.navigate(App.Routes.Application.previous(), { trigger: true } );
});

问题是模态视图没有被删除，所以我点击按钮再次触发它，我看到2个模态窗口，如何删除模态视图然后导航到我需要的路径？

我试过了，

    $('#myModal').on('hidden.bs.modal', function () {
        setTimeout(function() {
            self.remove();
        }, 500);
        App.Routes.Application.navigate(App.Routes.Application.previous(), { trigger: true } );
});

我认为可能在删除和导航之间添加延迟会起作用但是没有。

Self是此视图的实例，

App.Views.CreateNewOrganisationView = Backbone.View.extend（{

className: 'modal-body',

template: _.template( $('#tpl-new-organisation').html() ),

events: {
    "submit .create-organisation" : "createOrganisation",
    "click .js-add-member" : "addMember",
    "click .js-add-client" : "addClient",
    "click .js-add-project" : "addProject",
    "click .js-add-team" : "addTeam",
    "click .search-results a" : "selectSearchResult",

},

initialize: function() {

    this.model = new App.Models.Organisation;
    this.render();
},

clean: function() {
    console.log("here");

},

render: function() {
    //Backbone.Validation.bind(this);
    var self = this;


    $('#myModal').on('hidden.bs.modal', function () {
        setTimeout( function() {
            self.remove();
        }, 500);
        Pops.Routes.Application.navigate(App.Routes.Application.previous(), { trigger: true } );
    });

    this.$el.html( this.template() ).insertAfter('.modal-header');

    this.model.get('members').add(App.Session);

    this.model.get('members').first().set({
        id: Pops.Session.get('user_id'),
        admin: 0
    });

    var organisationMembersView = new App.Views.GroupsMembersAdminViews({
        collection: this.model.get('members')
    });

    $("#myModal").modal();

    return this;
},

addMember: function(e) {
    e.preventDefault();

    var element = $(e.currentTarget);

    this.$('.search').parent().children().show();
    this.$('.search').first().remove();

    //element.parent().children().hide();

    var search = new App.Views.SearchView({
        collection: new App.Collections.Users,
        type : "users",
        merge: false
    });

    element.parent().prepend(search.render().el);
},

addClient: function(e) {
    e.preventDefault();

    var element = $(e.currentTarget);

    this.$('.search').parent().children().show();
    this.$('.search').first().remove();

    //element.parent().children().hide();

    var search = new Pops.Views.SearchView({
        collection: new Pops.Collections.Clients,
        type : "clients",
        merge: false
    });

    element.parent().prepend(search.render().el);
},

addProject: function(e) {
    e.preventDefault();

    var element = $(e.currentTarget);

    this.$('.search').parent().children().show();
    this.$('.search').first().remove();

    //element.parent().children().hide();

    var search = new App.Views.SearchView({
        collection: new App.Collections.Projects,
        type : "projects",
        merge: false
    });

    element.parent().prepend(search.render().el);
},

addTeam: function(e) {
    e.preventDefault();

    var element = $(e.currentTarget);

    this.$('.search').parent().children().show();
    this.$('.search').first().remove();

    //element.parent().children().hide();

    var search = new App.Views.SearchView({
        collection: new App.Collections.Teams,
        type : "teams",
        merge: false
    });

    element.parent().prepend(search.render().el);
},

selectSearchResult: function(e) {
    e.preventDefault();

    var element = $(e.currentTarget),
        self = this;

    switch( element.data('type')) {
        case "organisation":
            var organisation = new Pops.Models.Organisation({ id: element.data('id')});
            organisation.fetch({
                success: function() {
                    self.model.get('organisations').add(organisation);

                }
            });
        break;

        case "project":
            var project = new App.Models.Project({ id: element.data('id')});
            project.fetch({
                success: function() {
                    self.model.get('projects').add(project);
                    console.log(self.model);
                    var model = self.model;
                    self.$('.search').hide();
                    self.$('button').show();
                    var projectsDetails = new App.Views.ProjectNamePillView({
                        model : project
                    });
                    self.$('.search').parent().append( projectsDetails.render().el );
                    self.$('.search').remove();
                }

            });
        break;

        // case "workflow":

        // break;

        case "user": 
            var member = new App.Models.User({ id: element.data('id')});
            member.fetch({
                success: function() {
                    self.model.get('members').add(member);
                    console.log(self.model);
                    var model = self.model;
                    self.$('.search').hide();
                    self.$('button').show();
                    var personAvatar = new App.Views.UserInitialsWithAdmin({
                        model: member
                    });
                    self.$('.search').parent().append( personAvatar.render().el);
                    self.$('.search').remove();
                }
            });
        break;

        case "client":
            var client = new App.Models.Client({ id: element.data('id')});
            client.fetch({
                success: function() {
                    self.model.get('clients').add(client);
                    var model = self.model;
                    self.$('.search').hide()
                    self.$('button').show();
                    var clientDetails = new App.Views.GroupNameAndAdminsView({
                        model: client
                    });
                    self.$('.search').parent().append( clientDetails.render().el );
                    self.$('.search').remove();
                }
            });


        break;

        case "team":
            var team = new App.Models.Team({ id: element.data('id')});
            team.fetch({
                success: function() {
                    self.model.get('teams').add(team);
                    var model = self.model;
                    self.$('.search').hide()
                    self.$('button').show();
                    team.initialize();
                    var teamDetails = new App.Views.GroupNameAndAdminsView({
                        model: team
                    });
                    self.$('.search').parent().append( teamDetails.render().el );
                    self.$('.search').remove();
                }
            });
        break;
    }
},

remove: function() {
    return Backbone.View.prototype.remove.apply(this, arguments);
},

close: function() {
    this.unbind();
    this.remove();
},

createOrganisation: function(e) {

    e.preventDefault();

    var element = $(e.currentTarget);
    var self = this;
    var data = element.serializeJSON();

    this.model.save(data, {
        success: function() {
            if(App.Collections.OrganisationCollection != undefined) {
                App.Collections.OrganisationCollection.add(self.model);
            }

            if(App.Collections._MyOrganisations != undefined) {
                App.Collections._MyOrganisations.add(self.model);
            }

            $("#myModal").modal('hide');
            //App.Routes.Application.navigate('#organisations/' . self.model.get())
        },
    });


}

}）;