Backbone.Router и его возможности

Backbone.Router является центральным компонентом для управления состоянием приложения и маршрутизацией URL. Его основная задача — сопоставление адресов страниц с действиями в приложении, что позволяет реализовать одностраничные приложения с навигацией без перезагрузки страницы.

Создание маршрутизатора

Маршрутизатор создается путем расширения Backbone.Router с определением маршрутов и соответствующих методов:

var AppRouter = Backbone.Router.extend({
    routes: {
        "": "home",
        "about": "aboutPage",
        "products/:id": "showProduct",
        "*path": "defaultRoute"
    },

    home: function() {
        console.log("Главная страница");
    },

    aboutPage: function() {
        console.log("Страница о нас");
    },

    showProduct: function(id) {
        console.log("Просмотр продукта с ID:", id);
    },

    defaultRoute: function(path) {
        console.log("Маршрут не найден:", path);
    }
});

Ключевые моменты:

  • routes — объект, где ключи представляют шаблоны URL, а значения — имена методов, которые вызываются при совпадении маршрута.
  • Поддерживаются параметры в URL через :param.
  • Маршруты с символом * выступают как универсальные обработчики для любых совпадений.

Инициализация и запуск маршрутизатора

Для активации маршрутов необходимо создать экземпляр и запустить историю браузера:

var router = new AppRouter();
Backbone.history.start();

Особенности:

  • Backbone.history.start() отслеживает изменения URL и инициирует соответствующие методы маршрутизатора.
  • Поддерживается как стандартная навигация по хэшу (#), так и pushState, если требуется работа с “красивыми” URL без хэша:
Backbone.history.start({ pushState: true });
  • Для корректной работы с pushState сервер должен быть настроен на возврат одной страницы для всех внутренних маршрутов.

Навигация через маршрутизатор

Для программного изменения маршрута используется метод navigate:

router.navigate("products/42", { trigger: true });

Параметры:

  • trigger: true — вызывает соответствующий метод маршрута.
  • replace: true — заменяет текущую запись в истории вместо создания новой.

Пример:

router.navigate("about", { trigger: true, replace: false });

Динамические маршруты и параметры

Маршруты могут содержать переменные сегменты:

routes: {
    "user/:userId/posts/:postId": "showUserPost"
},
showUserPost: function(userId, postId) {
    console.log("Пользователь:", userId, "Пост:", postId);
}
  • Backbone автоматически извлекает значения параметров и передает их в метод маршрута.
  • Параметры могут быть любыми строками, соответствующими сегментам URL.

Обработка несуществующих маршрутов

Использование универсального маршрута с *path позволяет обрабатывать ошибки или перенаправления:

routes: {
    "*path": "notFound"
},
notFound: function(path) {
    console.log("Страница не найдена:", path);
}
  • Такой маршрут должен располагаться в конце объекта routes, чтобы не блокировать другие маршруты.

Взаимодействие с представлениями

Маршрутизатор часто используется для управления отображением Backbone.View. Пример:

var HomeView = Backbone.View.extend({
    render: function() {
        this.$el.html("<h1>Главная страница</h1>");
        return this;
    }
});

var router = new AppRouter({
    routes: {
        "": "home"
    },

    home: function() {
        var view = new HomeView({ el: "#app" });
        view.render();
    }
});
  • Каждый маршрут может создавать и отображать соответствующее представление.
  • В больших приложениях маршрутизатор служит связующим звеном между URL и состоянием интерфейса.

Использование регулярных выражений

Маршруты могут быть сложными и определяться через регулярные выражения:

var router = Backbone.Router.extend({
    routes: {},

    initialize: function() {
        this.route(/^search\/(\w+)$/, "search", this.search);
    },

    search: function(query) {
        console.log("Поиск по запросу:", query);
    }
});
  • Метод route позволяет задавать маршрут программно, что даёт гибкость при сложных шаблонах URL.

События маршрутизатора

Backbone.Router поддерживает события, которые можно использовать для централизованного отслеживания навигации:

  • route — вызывается при срабатывании маршрута.
  • route:[name] — событие для конкретного маршрута.
  • all — срабатывает на все события маршрутизации.

Пример:

router.on("route:showProduct", function(id) {
    console.log("Событие маршрута: просмотр продукта", id);
});

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

Оглавление