Change current location programmatically

Question

How can I programmatically change the current location ?

The app-location is on parent element and I want change it from the child element.

here is parent excerpt

dom-module(id='test', assetpath='/')
    template
        app-location(route='{{route}}')
        app-route(route='{{route}}', pattern='/:page', data='{{rootData}}', tail='{{rootTail}}')
        ...
        login-page(name='login', route='[[rootTail]]')
        ...
    script.
        Polymer({is: 'test');

and the child

dom-module(id='login-page')
    template
        div(class='layout horizontal center-justified mh400')
            div(class='layout vertical center-justified')
                form(is='iron-form', id='login-form', method='post', action='/api/auth/login', on-iron-form-response='onResponse')
                    ...
    script.
        Polymer({
            is: 'login-page',
            onResponse: function (event) {
                var resp = event.detail.response;

                if (resp.success) {
                    // Change here the location
                }
            }
        })

Sorry by the Jade instead of html but give to understand i think.

Answer 1

app-location simply interfaces with the location bar of the browser. It uses iron-location internally. There's nothing stopping you from including it in the child element as well. It's role here would be to update the location bar (instead of listening to changes). In your JavaScript, select the element and update its path.

The app-location in the parent element will detect the change in the location bar and update route

dom-module(id='login-page')
    template
        app-location
        div(class='layout horizontal center-justified mh400')
            div(class='layout vertical center-justified')
                form(is='iron-form', id='login-form', method='post', action='/api/auth/login', on-iron-form-response='onResponse')
                    ...
    script.
        Polymer({
            is: 'login-page',
            onResponse: function (event) {
                var resp = event.detail.response;

                if (resp.success) {
                    // TODO: Update with your new path
                    this.shadowRoot.querySelector('app-location').path = '';
                }
            }
        })