En En

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


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

Чтобы определить маршрут, запустите команду:

ember generate route route-name

Она создает файл маршрута в app/routes/route-name.js, шаблон для маршрута в app/templates/route-name.hbs и файл модульного теста в tests/unit/routes/route-name-test.js. Также эта команда добавляет маршрут в роутер.

Основные маршруты

Чтобы определить соответствия URL, нужно вызвать метод map() в роутере приложения. При вызове map() следует передать функцию. Она будет вызвана со значением this, которое присваивается объекту. Этот объект можно использовать для создания маршрутов.

app/router.js

Router.map(function() {
  this.route('about', { path: '/about' });
  this.route('favorites', { path: '/favs' });
});

Теперь, когда пользователь посетит /about, Ember отобразит шаблон about. При посещении /favs Ember отобразит шаблон favorites.

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

app/router.js

Router.map(function() {
  this.route('about');
  this.route('favorites', { path: '/favs' });
});

Внутри шаблонов можно использовать {{link-to}}, чтобы перемещаться между маршрутами. Для этого нужно использовать имя, которое вы использовали для метода route.

{{#link-to "index"}}<img class="logo">{{/link-to}}

<nav>
  {{#link-to "about"}}About{{/link-to}}
  {{#link-to "favorites"}}Favorites{{/link-to}}
</nav>

Хелпер {{link-to}} также добавит класс active к ссылке, которая указывает на текущий активный маршрут.

В именах маршрутов, состоящих из нескольких слов, слова условно разделяют знаком тире, например:

app/router.js

Router.map(function() {
  this.route('blog-post', { path: '/blog-post' });
});

Определенный выше маршрут, по умолчанию, будет использовать обработчик маршрута blog-post.js, шаблон blog-post.hbs и носить имя blog-post в любом хелпере {{link-to}}.

Маршрут из нескольких слов, который не следуют этому соглашению, например:

app/router.js

Router.map(function() {
  this.route('blog_post', { path: '/blog-post' });
});

по умолчанию, также будет использовать обработчик маршрута blog-post.js, шаблон blog-post.hbs, но носить имя blog_post в любом хелпере {{link-to}}.

Вложенные маршруты

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

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

Определить вложенные шаблоны можно с помощью передачи this.route обратного вызова:

app/router.js

Router.map(function() {
  this.route('posts', function() {
    this.route('new');
  });
});

Чтобы сгенерировать вложенный маршрут выше, запустите команду:

ember generate route posts/new

Затем добавьте хелпер {{outlet}} в шаблон, чтобы указать, где вы хотите отобразить вложенный шаблон:

templates/posts.hbs

<h1>Posts</h1>
<!-- Display posts and other content -->
{{outlet}}

Этот роутер создает маршрут для /posts и /posts/new. Когда пользователь посещает /posts, он будет видеть просто шаблон posts.hbs (Ниже, в маршрутах index есть важное дополнение к этому). Когда пользователь посетит /posts/new, он увидит шаблон posts/new.hbs, представленный в {{outlet}} шаблона posts.

Имена вложенных маршрутов включают имена своих предков. Если вы хотите перейти к маршруту (через transitionTo или {{#link-to}}), обязательно используйте полное имя маршрута (posts.new, а не new).

Маршрут приложения

Переход на маршрут application происходит, когда приложение загружается в первый раз. Как и любой другой маршрут, по умолчанию он будет загружать шаблон с тем же именем (в данном случае application). Именно здесь следует размещать заголовок, нижнюю часть страницы и любые другие декоративные элементы. Все другие маршруты будут отображать свои шаблоны в {{outlet}} шаблона application.hbs.

Этот маршрут — часть любого приложения. Поэтому вам не нужно указывать его в app/router.js.

Маршруты INDEX

На каждом уровне вложения (включая верхний) Ember.js автоматически предоставляет маршрут под именем index для пути /. Чтобы проследить, когда появляется новый уровень вложенности, посмотрите роутер: всякий раз, когда вы видите function, можете отмечать новый уровень.

Например, если вы пишете простой роутер таким образом:

app/router.js

Router.map(function(){
  this.route('favorites');
});

Его эквивалентом будет:

app/router.js

Router.map(function(){
  this.route('index', { path: '/' });
  this.route('favorites');
});

Шаблон index отобразится в {{outlet}} шаблона application. Если пользователь переходит в /favorites, Ember.js заменит шаблон index на шаблон favorites.

Вложенный роутер вроде этого:

app/router.js

Router.map(function() {
  this.route('posts', function() {
    this.route('favorites');
  });
});

Служит эквивалентом:

app/router.js

Router.map(function(){
  this.route('index', { path: '/' });
  this.route('posts', function() {
    this.route('index', { path: '/' });
    this.route('favorites');
  });
});

Если пользователь переходит в /posts, текущим маршрутом будет posts.index, и шаблон posts/index отобразится в {{outlet}} шаблона posts.

Если пользователь затем перейдет в /posts/favorites, Ember.js заменит {{outlet}}`` в шаблоне posts на шаблон posts/favorites.

Динамические сегменты

Одно из назначений маршрута — загрузка модели.

Например, если у нас есть маршрут this.route('posts');, наш маршрут должен загрузить все публикации блога для приложения.

Так как /posts представляет фиксированную модель, нам не нужна какая-либо дополнительная информация, чтобы знать, какие данные извлекать. Но если вы хотите, чтобы маршрут представлял единичную публикацию, вряд ли вам захочется строго кодировать каждый возможный пост в роутере.

Вводите динамические сегменты.

Динамический сегмент — это часть URL, которая начинается с :, за которым следует идентификатор.

app/router.js

Router.map(function() {
  this.route('posts');
  this.route('post', { path: '/post/:post_id' });
});

Если пользователь переходит в /post/5, маршрут будет иметь идентификатор post_id с цифрой 5, который он использует, чтобы загрузить нужную публикацию. В Ember соблюдается соглашение о наименовании в стиле :model-name_id по двум причинам. Во-первых, если вы соблюдаете соглашение, маршруты по умолчанию знают, как вернуть необходимую модель. Во-вторых, параметр — объект, и он может иметь одно значение, связанное с ключом. Если написать код таким образом, он будет работать неправильно:

app/router.js

Router.map(function() {
  this.route("photo", { path: "photo/:id" }, function() {
    this.route("comment", { path: "comment/:id" });
  });
});

Но если написать так, то код будет работать должным образом:

app/router.js

Router.map(function() {
  this.route("photo", { path: "photo/:photo_id" }, function() {
    this.route("comment", { path: "comment/:comment_id" });
  });
});

В следующей главе, "Спецификация модели маршрута", вы подробнее узнаете о том, как загружать модель.

Обобщенные/подстановочные маршруты

Вы можете определить подстановочные маршруты, которые будут соответствовать нескольким сегментам URL. Это можно использовать, если вам, например, нужен "маршрут-ловушка". Он пригодится, если пользователь введет неправильный URL, который приложение не поддерживает.

app/router.js

Router.map(function() {
  this.route('page-not-found', { path: '/*wildcard' });
});

Обработчики маршрута

Чтобы маршрут выполнял что-то помимо отображения шаблона с тем же именем, вам нужно создать обработчик маршрута. В дальнейшем мы рассмотрим возможности обработчиков маршрута. Чтобы узнать подробнее о маршрутах, смотрите документацию API по роутеру и обработчикам маршрута.


Комментарии (0)

    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.