Частицы маршрутизации приложений Polymer с помощью Page.js

Question

Я использую Polymer Starter Kit и хотел бы, чтобы содержимое каждого маршрута было в отдельном файле (/pages/games.html, /pages/movies.html и т. Д.), Но я не могу найти никаких примеров этого.

Может ли кто-нибудь указать мне правильное направление? Или это невозможно или не рекомендуется для реализации маршрутизации, как это?

Answer 1

Вы можете подойти к этому множеством разных способов (замена держателя в index.html во время сборки, замена на другой маршрутизатор). Одним из таких подходов было бы реализовать ваши файлы и затем извлечь их в DOM. Это своего рода подход, который используется в примере частичных операций, который описан в репозитории page.js.

Итак, давайте изменим iron-pages в index.html в стартовом наборе есть раздел загрузки:

<iron-pages attr-for-selected="data-route" selected="{{route}}">

  <!-- Block we'll load our partials into -->
  <section id="load" data-route="load"></section>

...

Тогда давайте изменим elements/routing.html изменить наш page.js. Давайте маршрут /test в наш раздел целевой нагрузки:

window.addEventListener('WebComponentsReady', function() {

  page('/test', function () {

    // iron-pages needs to show the proper section
    // in this case, our designated loading target
    app.route = 'load';

    // We include fetch.js polyfill in route.html for simplicity
    // 1. bower install fetch
    // 2. Add <script src="../../bower_components/fetch/fetch.js"></script> to routing.html
    fetch('/pages/test.html')
      .then(function(response) {
        return response.text()
      }).then(function(body) {
        document.querySelector('#load').innerHTML = body;
      });
  });

  ...

Затем мы могли бы реализовать любое количество страниц в routing.html это будет загружать наши HTML-страницы по мере необходимости.

Обратите внимание, что в этом базовом подходе не учитывается кэширование ответа (возврат / переадресация снова вызовет запрос, что, вероятно, нежелательно с точки зрения производительности), и мы не улавливаем наши ошибки в приведенном выше примере. Но это один из таких подходов.