[英]Polymer app routing partials with Page.js
我正在使用 Polymer Starter Kit,并希望将每个路线的内容放在一个单独的文件中(/pages/games.html、/pages/movies.html 等),但我找不到任何此类示例。
有人能指出我正确的方向吗? 或者是不可能或不建议实现这样的路由?
您可以通过多种不同的方式来解决这个问题(在构建时替换 index.html 中的持有者,交换不同的路由器)。 一种这样的方法是实现您的文件,然后将它们 fetch() 放入 DOM。 这是 page.js 存储库中概述的部分示例中使用的一种方法。
所以,让我们修改 starter kit 中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>
...
然后我们修改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 页面。
请注意,这种基本方法没有考虑缓存响应(后退/前进会再次触发请求,从性能的角度来看,您可能不希望这样做)并且我们没有在上面的示例中捕获我们的错误。 但这是一种这样的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.