javascript - Double view render in routers

Question

var Router = Backbone.Router.extend({
    routes:{
        'notes': 'showNotes',
        "note/:noteId":       "openNote"
    },

    showNotes: function() {
        new app.NotesView;
    },

    openNote: function(noteId) {
        var NotesCollection = new app.NotesCollection();
        NotesCollection.fetch();

        var view = new app.NotesView({
            currentModel : NotesCollection.get(noteId)
        })

    }
});

Here the problem comes when I navigate to domain.com/#notes every time I navigate there a double view occurs, and any event get's fired multiple times.

Answer 1

我认为这是因为每次你去那里，你都会创建一个新视图（旧视图仍然存在）。相反，您可以只创建一次视图，然后在 showNotes 上调用渲染吗？

此外，作为旁注， fetch() 是一个异步调用，因此您必须等到通过传入回调（成功函数）并在那里进行计算来获取数据。

像这样的东西：

var notesView = new app.NotesView;

var Router = Backbone.Router.extend({
routes:{
    'notes': 'showNotes',
    "note/:noteId":       "openNote"
},

showNotes: function() {
    notesView.render(); // or append notesView.$el into the dom somewhere
},

openNote: function(noteId) {
    var NotesCollection = new app.NotesCollection();
    NotesCollection.fetch({
        success: function(){
            notesView.setModel(NotesCollection.get(noteId); // make this method youself
        }
    });
}

});