Polymer 带Page.js的聚合应用程序路由部分

我正在使用Polymer初学者工具包，希望将每条路线的内容保存在单独的文件中（/pages/games.html、/pages/movies.html等），但我找不到任何此类示例

---

有人能给我指出正确的方向吗？或者，不可能或不建议实现这样的路由吗？

您可以通过许多不同的方法来实现这一点（在构建时替换index.html中的一个保持器，换成不同的路由器）。其中一种方法是实现文件，然后将它们提取到DOM中。这是在page.js repo中概述的部分示例中使用的方法

因此，让我们修改初学者工具包中

index.html

中的

iron pages

，使其具有加载部分：

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

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

...

然后，我们可以在

routing.html

中实现任意数量的页面，根据需要加载html页面

---

注意，这种基本方法没有考虑缓存响应（back/forward将再次触发请求，从性能角度来看，这可能是您不希望的），并且在上面的示例中我们没有捕捉到错误。但这就是其中一种方法

谢谢，这正是我想要的。但是，模板和数据绑定如何在/pages/test.html中工作？我想我们需要动态初始化页面中的所有内容？如果您需要绑定和模板，那么我会采用不同的方法。我将我的功能定义为一个自定义元素，然后使用Polymer提供的绑定和模板操作。这为您提供了一个类似的设置（代码在单独的文件中），而不需要AJAX（您只需在节块中定义标记，然后通过page.js路由器设置进行导航）。应用程序定义在哪里，我在任何地方都找不到它，并且在网上多次看到它。i、 e.应用程序路径

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;
      });
  });

  ...