以编程方式更改当前位置

时间:2016-06-06 03:51:52

标签: polymer-1.0 web-component

如何以编程方式更改当前位置?

app-location位于父元素上,我想从子元素中更改它。

这里是父摘录

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');

和孩子

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

很抱歉Jade而不是html,但我想是理解。

1 个答案:

答案 0 :(得分:1)

app-location只是与浏览器的位置栏接口。它在内部使用iron-location。没有什么可以阻止你将它包含在子元素中。它的作用是更新位置栏(而不是听取更改)。在JavaScript中,选择元素并更新其path

父元素中的app-location将检测位置栏中的更改并更新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 = '';
                }
            }
        })