Главная

Webmacter V.2 Всё для вебмастера » Уроки по JS » Backbone.js 18 — динамичная маршрутизация

Backbone.js 18 — динамичная маршрутизация

Backbone.js 18 — динамичная маршрутизация


Продолжаем разбираться с роутером. В этом уроке рассмотрим динамичную маршрутизацию.




Динамичная маршрутизация в Backbone представлена двумя типами переменных. Первый называется :wild-card, который соответствует любой части URL между косыми чертами (/). И второй *splat, который соответствуют любому количеству частей и символов URL. Обратите внимание, что *splats всегда должен быть последней переменной в URL, так как будет соответствовать любым символам URL. Давайте начнем с wild-card:
App.Router = Backbone.Router.extend({
    routes: {
        ''                       : 'index',
        'page/:id'        : 'page'
    },

    index: function() {
        console.log('Всем привет от индексного роута!');
    },

    page: function(id) {
        console.log('это роут page' + id + '!!!');
    }
});

Попробуйте ввести в строке браузера например #page/1 и сразу проверить консоль, в ней вы должны увидеть строку “это роут page 1″. Теперь попробуйте поменять URL на #page/любое другое значение и вы увидите соответствующее сообщение в консоли.

Теперь рассмотрим *splat. Поменяем роут на следующий:
App.Router = Backbone.Router.extend({
    routes: {
        ''                       : 'index',
        'page/:id/*simbo'        : 'page'
    },

    index: function() {
        console.log('Всем привет от индексного роута!');
    },

    page: function(id, simbo) {
        console.log(simbo);
    }
});

Проверьте в браузере и удостоверьтесь, что в переменной simbo выводиться любое количество символов. Давайте рассмотрим, еще типичные варианты маршрутов. Маршрут запроса и маршрут по умолчанию:
App.Router = Backbone.Router.extend({
    routes: {
        ''                       : 'index',
        'page/:id/*simbo'        : 'page',
        'search/:query'          : 'search',
        '*other'                 : 'default'
    },

    index: function() {
        console.log('Всем привет от индексного роута!');
    },

    page: function(id, simbo) {
        console.log(simbo);
    },

    search: function(query) {
        
    },

    default: function(other) {
        alert('Хммм...вы уверены, что вы попали туда куда хотели? Вы находитесь на роуте ' + other);
    }
});

Введите в URL, любой неописанный в объекте routes “роут” и убедитесь, что всплывает alert.

Теперь вы умеете схватывать динамичные маршруты на backbone.js.

Источник:loftblog
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.