Определение маршрутов и их параметры

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

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

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

var AppRouter = Backbone.Router.extend({
    routes: {
        "": "home",
        "posts": "showPosts",
        "posts/:id": "showPostById",
        "search/:query/p:page": "search"
    },

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

    showPosts: function() {
        console.log("Список постов");
    },

    showPostById: function(id) {
        console.log("Пост с ID:", id);
    },

    search: function(query, page) {
        console.log("Поиск:", query, "Страница:", page);
    }
});

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

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

  • routes — объект, где ключи это URL-шаблоны, а значения — методы маршрутизатора.
  • Порядок маршрутов имеет значение: более специфичные должны идти выше более общих.
  • Маршрутизатор не выполняет никаких действий по умолчанию до вызова Backbone.history.start().

Параметры маршрутов

Backbone поддерживает динамические сегменты URL с помощью :param. Такие параметры автоматически передаются в функцию маршрута. Примеры:

  • "posts/:id" → id передаётся в функцию showPostById.
  • "search/:query/p:page" → два параметра: query и page.

Если параметр не указан в URL, функция всё равно будет вызвана, но соответствующий аргумент будет undefined.

Опциональные параметры

Параметры можно делать опциональными с помощью скобок (). Например:

routes: {
    "posts(/:id)": "showPost"
},

showPost: function(id) {
    if (id) {
        console.log("Показ поста с ID:", id);
    } else {
        console.log("Показ всех постов");
    }
}

Здесь posts без ID вызовет ту же функцию, что и posts/123, но аргумент id будет отсутствовать.

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

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

var AppRouter = Backbone.Router.extend({
    routes: {},
});

AppRouter.prototype.route(/^page\/(\d+)$/, "pageNumber", function(number) {
    console.log("Страница №", number);
});

Такой подход удобен для маршрутов, где стандартный синтаксис :param недостаточен.

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

Маршрутизатор генерирует событие route:[имя_функции] при срабатывании маршрута. Это позволяет подписываться на маршруты через .on:

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

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

  • Событие вызывается после вызова функции маршрута.
  • Можно использовать для глобальной логики без изменения конкретных методов маршрутизатора.

Навигация программно

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

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

Параметры:

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

Совмещение маршрутов и моделей

Часто маршруты используют параметры для получения данных моделей:

showPostById: function(id) {
    var post = postsCollection.get(id);
    if (post) {
        postView.render(post);
    } else {
        console.log("Пост не найден");
    }
}

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

Резюме структуры

  • Router.extend({ routes: {...}, ... }) — основа маршрутизации.
  • Параметры маршрута: динамические (:param) и опциональные ((:param)).
  • Регулярные выражения для сложных маршрутов.
  • События маршрутов (route:[name]) для глобальной логики.
  • Программная навигация через navigate.
  • Интеграция с коллекциями и моделями для построения динамических представлений.

Эти возможности Backbone.js позволяют создавать гибкие одностраничные приложения с поддержкой истории браузера и динамического отображения контента.

Оглавление