如何使用backbone.js 路由器切换视图？

Question

就使用主干路由器和在主干中渲染视图而言，这更像是一个概念性问题。

为了一个例子（我正在构建什么来学习这个），我有一个用于联系人的基本 CRUD 应用程序，具有创建表单、所有联系人列表、联系人单一视图和编辑表单。

为简单起见，我要说的是，我一次只想看到其中一件。显然用 jQuery 显示和隐藏它们是微不足道的，但这不是我想要的。

我有两个想法，

1) 从我的路由器触发自定义事件，该事件删除所有视图并发送可以在所有视图中侦听的事件（触发关闭方法）和然后实例化特定视图的主 App 视图 - 即：

App.Router = Backbone.Router.extend({
    routes: {
        '' : 'index',
        'addnew' : 'addNew',
        'contacts/:id' : 'singleContact',
        'contacts/:id/edit' : 'editContact'
    },

    index: function(){

        vent.trigger('contactR:closeAll');
        vent.trigger('contactR:index');
    },

    addNew: function() {

        vent.trigger('contactR:closeAll');
        vent.trigger('contactR:addNew');
    },

    singleContact: function(id) {

        vent.trigger('contactR:closeAll');
        vent.trigger('contactR:singleContact', id);
    },

    editContact: function(id) {

        vent.trigger('contactR:closeAll');
        vent.trigger('contactR:editContact', id);
    },

});

(nb : vent 正在扩展主干事件 obj 所以我可以发布/订阅)

2) 或者我会/可以/应该发送一个关闭所有事件并在路由器中创建一个视图实例？

请注意，我希望在不深入研究其他库或框架（如木偶等）的情况下实现这一目标。

Answer 1

您可以像这样使用实用程序对象：

var ViewManager = {
    currentView : null,
    showView : function(view) {
        if (this.currentView !== null && this.currentView.cid != view.cid) {
            this.currentView.remove();
        }
        this.currentView = view;
        return view.render();
    }
}

当你想显示一个视图时，使用ViewManager.showView(yourView)

App.Router = Backbone.Router.extend({
    routes: {
        '' : 'index',
        'addnew' : 'addNew',
        'contacts/:id' : 'singleContact',
        'contacts/:id/edit' : 'editContact'
    },

    index: function(){
        var indexView ...
        ViewManager.showView(indexView);
    },

    addNew: function() {
        var addNewView ...
        ViewManager.showView(addNewView);
    },

    singleContact: function(id) {
        var singleContactView ...
        ViewManager.showView(singleContactView);
    },

    editContact: function(id) {
        var editContactView ...
        ViewManager.showView(editContactView);
    },

});

所以是 ViewManager 负责呈现您的视图