Управление представлениями с помощью маршрутизаторов в Backbone.js

Я работаю в одностраничном приложении со следующим макетом:

Макет приложения

Я использую маршрутизатор Backbone.js для управления элементами, загружаемыми на экран:

var AppRouter = Backbone.Router.extend({
    routes: {
        ""              : "list",
        "content1"      : "content1",
        "content1/cont3": "cont3"
    },

    list: function() {
        var list = new List().render().$el; //view
        $("#List").html(list);
    },

    content1: function(){
        var cont1 = new Content1().render().$el; //view
        $("#Content1").html(cont1);
    },

    content3: function(){
        var cont3 = new Content3().render().$el; //view
        $("#Cont3").html(cont3);
    }        

});

Каждый раз, когда я нажимаю на элемент списка в #List, генерируется #Content1, а когда я делаю это на блоках в #Content1, появляется #Cont3.

Проблема, с которой я сталкиваюсь, заключается в том, что если по какой-то причине я обновляю страницу, когда адрес, например, localhost/content1; элементы в #List исчезают.

Я хочу, чтобы содержимое в #List всегда присутствовало при загрузке, независимо от того, каким может быть URL-адрес, а также содержимое в #Content1. Есть ли способ добиться этого с помощью магистральных маршрутизаторов?

Спасибо


backbone.js backbone-views backbone-routing
person rpabon    schedule 10.07.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вам не нужно сопоставлять 1 маршрут ‹-> 1 View.
Я бы изменил маршруты примерно так:

"list": "displayContent",
"list/:c1": "displayContent",
"list/:c1/:c3": "displayContent",

Так что это только один обратный вызов, который определяет, какие представления отображаются, а какие нет.

displayContent: функция (c1, c3) {

Сохраните переменную content1 и проверьте, была ли она уже визуализирована или нет, и т. д.

Взгляните на этот вопрос: Как обрабатывать инициализацию и рендеринга подвидов в Backbone.js?

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

https://github.com/tbranyen/backbone.layoutmanager
https://github.com/derickbailey/backbone.marionette

person corbacho    schedule 10.07.2012
comment
Gracias @corbacho, я обошел это решение, и оно дало мне ожидаемый результат. - person rpabon; 11.07.2012

arrow_upward
0
arrow_downward

Я думаю, вы можете попробовать это:

.....
   list: function() {
        var list = new List().render().$el; //view
        $("#List").html(list);
    },

    content1: function(){
        var cont1 = new Content1().render().$el; //view
        $("#Content1").html(cont1);
        //Pseudo code
        if (listisempty){
           list();//If the list is empty, then the initialization list.
        };
    },

.....
person Justin wong    schedule 10.07.2012