PolymerElements / app-route

A modular client-side router
https://www.polymer-project.org/1.0/articles/routing.html
146 stars 66 forks source link

Changing data.page doesn't update history #202

Closed artemik closed 6 years ago

artemik commented 7 years ago

Suppose have this:

    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}">
    </app-route>

Programmatically updating routeData.page brings me to a new page, but it doesn't update the browser history.

I know about

window.history.pushState({}, null, '/new_path');
window.dispatchEvent(new CustomEvent('location-changed'));

but I definitely shouldn't mess around with it manually.

ymaz commented 7 years ago

@artemik you could try to update route "programmatically" this.set(route, '/new_path'); it should force whole route update as well as history records.

ggirard07 commented 7 years ago

route is not a simple string bug rather a complex object. I don't think you can update it this way without breaking some app-location / app-route internals.

ymaz commented 7 years ago

@artemik @ggirard07 Yes, you are right, that route is Object,3 so then you should able to update the path prop under this object this.set('route.path', '/search/'); or via this.set('routeData.user', 'mary'); ^^ https://www.polymer-project.org/1.0/toolbox/routing#change-routes

hariprasadiit commented 6 years ago

i think app-route is working as intended.

take a look at this code

__updatePathOnDataChange: function() {
        if (!this.route || !this.active) {
          return;
        }
        var newPath = this.__getLink({});
        var oldPath = this.__getLink(this._dataInUrl);
        if (newPath === oldPath) {
          return;
        }
        this.set('route.path', newPath);
      },

if location is example.com/#/, then active is false in the case of

<app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}">
    </app-route>

so any changes to the data will not reflect in route object.

but if location is example.com/#/some-page, then active is true and changes to the data will update route object

e111077 commented 6 years ago

Cannot reproduce. Please reopen with a live code example. Please see our issue template:

https://raw.githubusercontent.com/PolymerElements/app-route/master/.github/ISSUE_TEMPLATE.md