Как переключать представления с помощью роутера backbone.js?

Question

Это скорее концептуальный вопрос с точки зрения использования магистрального маршрутизатора и рендеринга представлений в магистрали.

В качестве примера (с чем я собираюсь это научиться) у меня есть базовое приложение CRUD для контактов, с формой создания, списком всех контактов, единым представлением контактов и формой редактирования.

для простоты я скажу, что я хотел бы видеть только одну из этих вещей одновременно. Очевидно, что показывать и скрывать их с помощью jQuery было бы тривиально, но это не то, что мне нужно.

У меня есть две идеи,

1) запускать пользовательские события из моего маршрутизатора, который удаляет все представления и отправляет события, которые можно прослушивать во всех представлениях (вызывая метод close), и основное представление приложения, которое затем создает конкретное представление, т.е.

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) или можно / можно / нужно отправить событие close all и создать экземпляр представления в маршрутизаторе?

Обратите внимание, что я хочу достичь этого, не углубляясь в дополнительные библиотеки или фреймворки, такие как марионетка и т. Д.

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 отвечает за отображение ваших представлений