Polymer app-route 子路由不会随着路由更改而更新

Question

我的问题涉及链接应用程序路由。最初我认为这个错误来自我的应用程序，但我用一个简单的例子重新创建了它。问题源于首先访问与子路由匹配的 url，然后更改路由，使其与子路由不匹配。

我不能使用 Polymer cdn 基础标签，因为它会改变路由的行为。如果您复制并粘贴代码运行 bower init; bower install --save PolymerElements/app-route; python3 -m http.server; 它应该运行示例代码。

问题

单击 link 以 #/tree/maple 导致 routeData.collection = 'tree'、subrouteData.uuid = 'maple'。 这是正确的并且符合预期
下一步点击 link 到 #/tree 导致 routeData.collection = 'tree', subrouteData.uuid = 'maple'。 注意没有任何变化

请注意，即使路径更改为 #/tree ，子路径也不会更新 。这是我对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>

可能的解决方案但不是那么干净

<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>

它 item 会得到优先考虑。

Answer 1

实验表明，当路由不再匹配时，<app.route> 会更改 subroute 但不会清除 subrouteData（也许这是该元素中的错误）。但是，<app-route> 总是在 active=true 时设置 data（即路由匹配），因此您必须在读取 data 之前检查 active 标志。

例如，如果 active 为 true，您只能显示一个元素（并在 false 时将其从 DOM 中删除）：

<template is="dom-if" if="[[subrouteActive]]" restamp>
  <my-el uuid="[[subrouteData.uuid]]"></my-el>
</template>

或者如果 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...
}

或者元素可以观察 active 并在 false:

时重置内容

// my-el script
_onActiveChanged: function(active) {
  if (!active) {
    // reset...
  }
}

Polymer app-route 子路由不会随着路由更改而更新

Polymer app-route subroute does not update with route change

javascript

polymer

polymer-1.0

问题

可能的解决方案但不是那么干净