聚合物app-route子路由不会随路由更改而更新
[英]Polymer app-route subroute does not update with route change
问题描述
My problem involves chaining app-route. 
我的问题涉及链接app-route。 Originally I thought this bug came from my application but I recreated it with a simple example. 最初我认为这个bug来自我的应用程序，但我用一个简单的例子重新创建它。 The issue arises from first visiting a url that matches the subroute and then changing the route so that it does not match the subroute. 问题来自于首先访问与子路由匹配的URL，然后更改路由以使其与子路由不匹配。
I cannot use the Polymer cdn base tag because it will change the behavior of routing. 我不能使用Polymer cdn基本标记，因为它会改变路由的行为。 If you copy and paste the code run bower init; bower install --save PolymerElements/app-route; python3 -m http.server; 如果你复制并粘贴代码运行bower init; bower install --save PolymerElements/app-route; python3 -m http.server; bower init; bower install --save PolymerElements/app-route; python3 -m http.server; It should run the example code. 它应该运行示例代码。
The Problem 问题
- Click link to
#/tree/maplecauses routeData.collection = 'tree', subrouteData.uuid = 'maple'.单击链接到#/tree/maple会导致routeData.collection ='tree'，subrouteData.uuid ='maple'。 This is correct and behaves as expected这是正确的，并且表现如预期 - Next click link to
#/treecauses routeData.collection = 'tree', subrouteData.uuid = 'maple'.接下来单击链接到#/tree会导致routeData.collection ='tree'，subrouteData.uuid ='maple'。 notice nothing changes注意没有变化
Notice how even though the path changed to #/tree the subroute did not update . 请注意，即使路径更改为#/tree ，子路由也不会更新 。 Is this a problem with my understanding of app-route ? 这是我对app-route理解的问题吗？
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="import" href="./bower_components/app-route/app-route.html"> <link rel="import" href="./bower_components/app-route/app-location.html"> <link rel="import" href="./bower_components/polymer/polymer.html"> </head> <body> <x-example></x-example> </body> </html> <dom-module id="x-example"> <template> <style> </style> <app-location route="{{route}}" use-hash-as-path></app-location> <app-route route="{{route}}" pattern="/:collection" data="{{routeData}}" tail="{{subroute}}"></app-route> <app-route route="{{subroute}}" pattern="/:uuid" data="{{subrouteData}}"></app-route> <h1>Path</h1> <p>route: [[routeData.collection]]</p> <p>subroute: [[subrouteData.uuid]]</p> Visit: [In Order] <a href="#/tree/maple">[2] Collection [TREE] UUID [MAPLE]</a> -> <a href="#/tree">[1] Collection [TREE]</a> </template> <script> Polymer({ is: "x-example", }); </script> </dom-module>
Possible Solution but not as clean 可能的解决方案但不干净
<app-route route="{{route}}" pattern="/:collection" data="{{listData}}" active="{{listActive}}"></app-route>
<app-route route="{{route}}" pattern="/:collection/:uuid" data="{{itemData}}" active="{{itemActive}}"></app-route>
It item would get preference. 该item将获得优先权。
1 个解决方案
解决方案1
5 已采纳 2016-11-15 00:14:30
Experimentation shows that when the route no longer matches, <app.route> changes subroute but doesn't clear subrouteData (perhaps this is a bug in that element). 实验表明，当路由不再匹配时， <app.route>更改子subroute但不清除subrouteData （可能这是该元素中的错误）。 However, <app-route> always sets data when active=true (ie, the route matches), so you would have to check the active flag before reading data . 但是， <app-route>总是在active=true时设置data （即路由匹配），因此您必须在读取data之前检查active标志。
For example, you could only show an element if active is true (and remove it from the DOM when false ): 例如，你可以只显示一个元素，如果active是true （和在DOM中取出false ）：
<template is="dom-if" if="[[subrouteActive]]" restamp>
<my-el uuid="[[subrouteData.uuid]]"></my-el>
</template>
Or the element could internally skip processing if active is false : 或者，如果active为false则元素可以在内部跳过处理：
<my-el uuid="[[subrouteData.uuid]]" active="[[subrouteActive]]"></my-el>
// my-el script
_processUuid: function() {
if (!this.active) return;
// do something with this.uuid...
}
Or the element could observe active and reset things if false : 或者，如果为false ，元素可以观察到active并重置事物：
// my-el script
_onActiveChanged: function(active) {
if (!active) {
// reset...
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.