Продолжаем разбираться с роутером. В этом уроке рассмотрим динамичную маршрутизацию.
Динамичная маршрутизация в 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