javascript - 路由器中的双 View 渲染

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

    }
});

这里的问题是当我每次导航到 domain.com/#notes 时都会出现双重 View ，并且任何事件都会被多次触发。

Answer 1

我认为这是因为每次去那里都会创建一个新 View (旧 View 仍然存在)。相反，您能否只创建一次 View 并在 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
        }
    });
}

});