Polymer app-route query string format -


i replaced pagejs routing in our application app-location , app-route, , seems working except query parameters. noticed can read urls host?param1=val1#/view, not host#view?param1=val1 how pagejs used to.

upon further digging, discovered rfc standard. find odd pagejs , angular can use nonstandard query string format.

is there way use query-params attribute of app-route read nonstandard query parameters backward compatibility?

the non-standard form works in pagejs because pagejs manually parses query string url extracting text follows ? , parsing hashes need separated out. angular might similar. on other hand, <app-location> (and <iron-location>) uses platform's window.location.search fetch query parameters.

if need stick <iron-location>, add backward compatible support monkey-patching <iron-location>._urlchanged(), responsible parsing urls <app-location>.

monkey-patched <app-location>:

polymer({   is: 'my-app',    ready: function() {     this._setupapplocation();   },    _setupapplocation: function() {     // assumes <app-location id="location">     const ironlocation = this.$.location.$$('iron-location');     if (!ironlocation) return;      ironlocation._urlchanged = function() {       this._dontupdateurl = true;       this.path = window.decodeuricomponent(window.location.pathname);       if (window.location.hash.includes('?')) {         const parts = window.location.hash.split('?');         this.hash = window.decodeuricomponent(parts[0].slice(1));         this.query = parts[1];          // prepend other query parameters found in standard location         if (window.location.search) {           this.query = window.location.search.substring(1) + '&' + this.query;         }       } else {         this.query = window.location.search.substring(1);       }       this._dontupdateurl = false;       this._updateurl();     };   } }); 

alternatively, switch polymer element supports parsing query parameters in either form out of box. recommend <nebula-location> (which uses qs query string parser).

example usage of <nebula-location>:

<nebula-location data="{{locationdata}}"></nebula-location> <div>foo=[[locationdata.queryparams.foo]]</div> <a href="[[rootpath]]#view?foo=123">#view?foo=123</a> <a href="[[rootpath]]?foo=123#view">?foo=123#view</a> 

Comments

Popular posts from this blog

javascript - Create a stacked percentage column -

Optimising Firebase database by automatically overwriting data -

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -