聚合物应用程序使用Page.js路由部分

时间:2015-07-03 16:59:40

标签: polymer page.js

我使用的是聚合物入门套件,并希望将每个路径的内容放在一个单独的文件中(/pages/games.html,/pages/movies.html等),但我可以&#39 ;找到任何这方面的例子。

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

1 个答案:

答案 0 :(得分:2)

您可以通过许多不同的方式来解决这个问题(在构建时替换index.html中的持有者,交换不同的路由器)。一种这样的方法是实现您的文件,然后将它们()提取到DOM中。这是在page.js repo。

中概述的partials示例中使用的方法

因此,让我们修改入门套件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页面。

请注意,这种基本方法并未考虑缓存响应(后退/前进会再次触发请求,您可能不希望从性能角度来看)并且我们不会在上面的例子中捕捉我们的错误。但它就是这样一种方法。