Полимерные анимированные страницы по умолчанию

Question

Я использую Polymercore-animated-pages для переключения между основными страницами моих веб-сайтов.

Я выбираю, какая страница должна быть указана идентификатором этого <section>. Вы можете увидеть образец в действии here. Теперь проблема заключается в том, что при загрузке страницы страница, которая должна быть выбрана, загружается из URL-адреса, например, www.example.com/home показывает домашнюю страницу, www.example.com/activities показывает страницу действий (код, приведенный в качестве примера, так как это не актуально).

Но что делать, если идентификатор, указанный в ссылке, не существует? Есть ли опция показать по умолчанию сообщение core-animated-pages с сообщением 404? Или мне нужно проверять каждую ссылку, если она находится в массиве всех моих страниц, если так загружать страницу ошибок вручную и показывать правильную страницу?

Снова, вот пример: jsbin.

Редактировать: Чтобы показать способ ссылки на ссылки на страницу, вот пример обновления: jsbin. Связывание по существу www.example.com/#home и т. Д.

Answer 1

Есть несколько вещей, которые вы можете сделать здесь.

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

pageChanged: function(){ var foundPage = this.$.pages.querySelector('#' + this.page); if (! foundPage) { this.page = 'error' } ...

См: http://jsbin.com/xequvone/14/edit

Если вы не связывают core-menu непосредственно к core-animated-pages, вы можете добавить любую логику вы хотите. Следующий вариант делает то же самое, что и предыдущий, но использует отдельную переменную для выбранной страницы:

http://jsbin.com/xequvone/12/edit

Я думаю, что вы хотите маршрутизатор, если ваша схема URL был более сложным. Например, если хэш включает в себя несколько уровней и параметров, таких как #people, #/people/search или #/people/edit/12343.

Answer 2

Что-то, что мне не хватает при рассмотрении вашего примера, - это то, как вы обрабатываете маршрутизацию. На обычном сайте, если пользователь перейдет к example.com/foo или example.com/#foo, мое ожидание будет (с использованием вашей текущей настройки), которое приведет вас к соответствующей странице core-animated-pages с идентификатором foo или разделом, соответствующим этому маршруту.

Использование маршрутизации (возможно, элемент Polymer flatiron-director), основное решение может запросить DOM в вашем элементе, чтобы узнать, есть ли раздел ID notsupportedURL. Если нет, то по умолчанию пользователь должен перейти на вашу страницу core-animated-pages 404, которая не должна быть сложнее, чем у вас сейчас.