All geek questions in one place

Subprogram "Polymer" is not updated with a change in route

My problem is with the route binding of the application. Initially, I thought this error came from my application, but I recreated it with a simple example. The problem occurs when you first visit the URL that corresponds to the routine, and then change the route so that it does not match the routine.

I cannot use the base Polymer cdn tag because it will change the routing behavior. If you copy and paste the bower init; bower install --save PolymerElements/app-route; python3 -m http.server; startup code bower init; bower install --save PolymerElements/app-route; python3 -m http.server; bower init; bower install --save PolymerElements/app-route; python3 -m http.server; he should run the sample code.

Problem

  • Click on the link to #/tree/maple calls routeData.collection = 'tree', subrouteData.uuid = 'maple'. This is correct and behaves as expected.
  • The following link to the #/tree link calls routeData.collection = 'tree', subrouteData.uuid = 'maple'. notification does not change anything

Note that although the path was changed to #/tree , the routine did not update . Is this a problem with my understanding of 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 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>

This will be an item .

+6
source share
1 answer

The experiment shows that when the route no longer matches, <app.route> modifies the subroute , but does not clear the subrouteData (perhaps this is an error in this element). However, <app-route> always sets data when active=true (i.e. the route matches), so you will need to check the active flag before reading data .

For example, you can only show an element if active is true (and remove it from the DOM if false ):

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

Or the element may internally skip processing if active is 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 :

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

Source: https://habr.com/ru/post/1012314/

More articles:


All Articles