Изменить маршрут Polymer 3 на другую HTML-страницу - PullRequest
Новая
       1

Изменить маршрут Polymer 3 на другую HTML-страницу

0 голосов
/ 21 сентября 2018

Я создаю пример приложения Polymer 3 со страницей входа и панели управления.Мой бэкэнд - это простой JX-RS REST API.Получив ответ от веб-службы, я хочу перейти к новому HTML-файлу (например, говорит dashboard.html), а не направлять его к другому элементу на той же странице.Когда я захожу на официальный сайт , я не могу понять, как действовать, поскольку я новичок в самом JS.

В моем index.html у меня <my-login>, послеответ, handlePositiveResponse называется.Это место, где я меняю маршрут.Пожалуйста, найдите метод ниже.

Ниже приведен мой код: login.js 

class MyLogin extends PolymerElement {
static get template() {
    return html`
    <h1>Hello World..!!</h1>
    <iron-form id="loginUserForm"  on-iron-form-response="handlePositiveResponse" on-iron-form-error="handleNegativeResponse">
            <form id="innerLoginUserForm" content-type="application/json" method="post">
                <paper-input id="email" name="email"  label="E-Mail Address"></paper-input>
                <paper-input id="password" name="password" label="Password" type="password"></paper-input>
                <paper-button disabled="{{activeRequest}}" raised id="loginButton" on-tap="submitLogin">Sign In</paper-button>
            </form>
    </iron-form>
    `;
}

static get properties() {
    return {
        page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged'
        },
        routeData: Object,
        subroute: Object
    };
}

static get observers() {
    return [
        '_routePageChanged(routeData.page)'
    ];
}

_routePageChanged(page) {
    // Show the corresponding page according to the route.
    //
    // If no page was found in the route data, page will be an empty string.
    // Show 'view1' in that case. And if the page doesn't exist, show 'view404'.
    if (!page) {
        this.page = 'login';
    } else if (['view1', 'view2', 'view3', 'my-dashboard'].indexOf(page) !== -1) {
        this.page = page;
    } else {
        this.page = 'view404';
    }

    // Close a non-persistent drawer when the page & route are changed.
    // if (!this.$.drawer.persistent) {
    //   this.$.drawer.close();
    // }
}

_pageChanged(page) {
    // Import the page component on demand.
    //
    // Note: `polymer build` doesn't like string concatenation in the import
    // statement, so break it up.
    switch (page) {
        case 'view1':
            import('./my-view1.js');
            break;
        case 'view2':
            import('./my-view2.js');
            break;
        case 'view3':
            import('./my-view3.js');
            break;
        case 'my-dashboard':
            import('./my-dashboard.js');
            break;
        case 'view404':
            import('./my-view404.js');
            break;
    }
}

submitLogin(e) {
    var form = this.shadowRoot.querySelector('#loginUserForm');
    this.shadowRoot.querySelector('#innerLoginUserForm').action = 'http://localhost:8080/PolymerJavaBackend/rest/login'
    form.submit();
}

handlePositiveResponse(response) {
    this._routePageChanged(null);
    this._routePageChanged('my-dashboard');
    console.log(response);
}

handleNegativeResponse(error) {
    console.log(error);
}

Буду признателен, если вы могли бы посоветовать, как перейти к новому HTMLстр.

1 Ответ

0 голосов
/ 23 сентября 2018

Это ваш элемент верхнего уровня?Находится в вашем элементе верхнего уровня, где у вас должен быть элемент iron-pages со всеми страницами, которые есть в вашем приложении, и где вы должны добавить новую страницу.

Там выдолжен иметь _routePageChanged для проверки изменений данных маршрута.И _pageChanged для импорта страницы.

Если вы хотите перейти на новую страницу, не из меню, а когда вы получите ответ от сервера, в handlePositiveResponse (response) ,вы можете использовать двустороннюю привязку данных или this.set для обновления значения маршрута: this.set('route.path', '/my-dashboard');

...