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

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

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

Backbone.Router

Backbone.Router позволяет реализовать навигацию в SinglePage-приложении. Обратимся к документации:

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

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

Пример роутера:


var Router = Backbone.Router.extend({
    routes: {
        'books': 'booksList'
        'books/:id': 'bookDetail'
    },
    booksList: function() {
        ...
    },
    bookDetail: function(id) {
        ...
    }
});

Здесь мы определили два роута: для списка книг и для детальной страницы книги. Объект routes как раз содержит соответствия между шаблонами и функциями, которые должны вызываться при совпадении с шаблоном. Ключами этого объекта должны быть строки, которые, в свою очередь, могут содержать специальные обозначения:

  • :id — параметр шаблона, значение id будет передано в соответвующую функцию. Например, для страницы /#books/123 параметр id будет равен 123.
  • *path — соответствует любому количеству фрагментов URL, например, для страницы /#upload/test/test-image.png и шаблоны «upload/*path» в функцию будет передано test/test-image.png.

Динамическое добавление роутов

Создавать роуты можно не только в описании класса, но и динамически после инициализации. Для этого служит функция route(pattern, name, [callback]).

Параметр pattern может быть как строкой (по аналогии с ключом объекта routes), так и регулярным выражением.

Параметр name используется для отслеживания события данного роута, будет сгенерировано событие route:name.

Параметр callback — действие, которое должно быть выполнено при совпадении URL с шаблоном.


initialize: function(options) {
    this.route("page/:number", "page", function(number) { ... });
    this.route(/^(.*?)\/open$/, "open");
},

Обратите внимание, что последний добавленный роут с определенным шаблоном переопределит ранее добавленные с тем же шаблоном.

Роуты с регулярными выражениями

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


var Router = Backbone.Router.extend({
    routes: {},
    initialize: function() {
        var router = this,
            routes = [
                [/^products/, 'products', this.products],
                [/^users/, 'users', this.users],
                [/^clients/, 'clients', this.clients]
                ['', 'main', this.main]
            ];

        _.each(routes, function(route) {
            router.route.apply(router, route);
        });
    },
    
    products: function() { … },
    users: function() { … },
    clients: function() { … },
    main: function() { … }
});

В этом примере при инициализации роутера мы описываем массив роутов и дальше в цикле добавляем каждый из них к роутеру.

Переход по любому URL, удовлетворяющему шаблону /^products/:

/#products/list
/#products/123
/#products/id-123
/#products/new

будет вызывать функцию products(). При необходимости, можно передать в функцию-обработчик определенные параметры, для этого необходимо использовать группировки в регулярном выражении, например, /^products(.*)/.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться