История pushstate магистрали не работает

Я использую маршруты backbone.js и изо всех сил пытаюсь заставить историю работать. Вот код, который у меня есть:

$(function() {  

    var AppRouter = Backbone.Router.extend({
        routes: {
           "/": "initHome",
           "home": "initHome",
           "projects": "initProjects",
           "project/:id" : "initProject"
        }
    });

    // Instantiate the router
    var app_router = new AppRouter;

    app_router.on('route:initProject', function (id) {
        // Note the variable in the route definition being passed in here
          getContent("project",id);
    });

    app_router.on('route:initProjects', function () {
          getContent("projects");
    });

    app_router.on('route:initHome', function () {
          getContent("home");
    });


    // SINGLE PAGE MAGIC
    $(document).on("click",".links",function(e) {
        var href = $(this).attr("href");
        var url =  lang + "/" + href;    
            page = $(this).attr("data-id");
        var param = $(this).attr("data-param");         
        if (typeof(param) == 'undefined') { param = ""; }  

        if(activepage != href && !main.hasClass("loadingPage")){    
            loader.show();  
            firstInit = false;
            activepage = href;
            res = app_router.navigate(url, true);
            getContent(page,param);
        }   
        return false;                           
    });

    Backbone.history.start({pushState: true, root: "/karlin/"});

});

Состояние Push отлично работает при нажатии, но оно не вызывает функцию getContent(), когда я пытаюсь нажать кнопки «Назад/Далее» в браузере. Я новичок в бэкбоне, поэтому любой совет будет полезен.


pushstate browser-history backbone.js backbone-routing
person hjuster    schedule 27.01.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Измените это: res = app_router.navigate(url, true);

На это: app_router.navigate(url, {trigger: true});

Я не вижу причин для создания переменной «res».

ИМХО у вас запутанная реализация Backbone. Я бы предложил перенести ваши маршруты в конструктор следующим образом:

var AppRouter = Backbone.Router.extend({
    routes: {
       "/": "initHome",
       "home": "initHome",
       "projects": "initProjects",
       "project/:id" : "initProject"
    },

    initProject: function (id) {
    // Note the variable in the route definition being passed in here
      getContent("project", id);
    },

    initProjects: function () {
      getContent("projects");
    },

    initHome: function () {
      getContent("home");
    }
});

// Instantiate the router
var app_router = new AppRouter;

Кроме того, если вы правильно настроите свои маршруты, как в документации Backbone,

routes: {
  "help":                 "help",    // #help
  "search/:query":        "search",  // #search/kiwis
  "search/:query/p:page": "search"   // #search/kiwis/p7
},

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

Router.navigate для редких случаев.

Я предлагаю читать документы Backbone снова и снова. Каждый раз узнаю что-то новое. Там много всего, и Backbone уже работает эффективно. Не нужно изобретать велосипед.

Надеюсь это поможет!

person AndrewHenderson    schedule 01.02.2013

arrow_upward
0
arrow_downward

Я второй ответ Эндрю: ваше использование маршрутизации немного странно.

Если вам интересно узнать больше о том, почему, по словам Эндрю, «Router.navigate предназначен для редких случаев», прочитайте страницы 32–46 здесь: http://samples.leanpub.com/marionette-gentle.-introduction-sample.pdf

Это часть примера для моей книги о Backbone.Marionette.js, но концепции маршрутизации остались прежними. В частности, вы узнаете, почему значение trigger по умолчанию равно false, и почему проектирование маршрутизации приложений с учетом этого сделает ваши приложения лучше.

person David Sulc    schedule 20.05.2013