Aurelia -- 表单提交问题的路线变更答案

【问题标题】：Aurelia -- Route Change on Form Submission IssueAurelia -- 表单提交问题的路线变更
【发布时间】：2016-01-09 08:16:38
【问题描述】：

Aurelia 新手在这里，我碰壁了。

因此，这段代码运行良好，并且发生了路由更改，但它仅在单击home.html 文件上的提交按钮两次后才会发生。在第一次单击提交按钮时，我收到以下错误：ERROR [app-router] Error: Route not found: /anonymous-wow-armory-profile/。

我的问题是为什么它在提交两次表单后起作用，但不是第一次？我知道我在这里的过程中遗漏了一些东西。

home.html

<template>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 nav-home text-center">
                <a href="http://www.maskedarmory.com">Create Profile</a>
                <a href="mailto:shane@khaccounts.net?subject=Bug Report">Bug Report</a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="logo">
                    <img src="dist/assets/images/logo.png" alt="Logo" />
                </div>
            </div>
        </div>

        <div class="row row-bottom-pad">
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <div class="profile-creation-box">
                    <div class="box-padding">
                        <strong>Masked Armory</strong> is the most well known anonymous World of Warcraft (WoW) profile source in the Real Money Trading (RMT) market. We take everything to the next level with offering alternate gear sets, sorted reputation display, Feat of Strength / Legacy achievement display, and much more!<br /><br />
                        Come make a profile at Masked Armory today and see that we are the best solution for all of your anonymous WoW Armory profile needs!
                    </div>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>

        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4 container-bottom-pad">
                <div class="profile-creation-box">
                    <div class="box-padding">
                        <form class="form-horizontal" role="form" submit.delegate="submit()">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">Region</label>
                                <div class="col-sm-9">
                                    <label class="radio-inline">
                                        <input type="radio" name="region_name" value="us" checked.bind="postData.region"> United States
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="region_name" value="eu" checked.bind="postData.region"> Europe
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="server_name" class="col-sm-3 control-label">Server</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="server_name" placeholder="Server Name" value.bind="postData.serverName">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="character_name" class="col-sm-3 control-label">Character</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="character_name" name="character_name" placeholder="Character Name" value.bind="postData.characterName">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-9">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="altgear" name="altgear"> Add Alternate Gearset
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-9">
                                    <button type="submit" class="btn btn-danger">Create Armory Profile</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>
    </div>
</template>

home.js

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';
import {Router} from 'aurelia-router';

@inject(Router)
export class Home {

    postData: Object = {};
    data: string = '';
    code: string = '';
    loading: boolean = false;
    http: HttpClient = null;
    apiUrl: string = 'http://localhost:8000/api/v1';

    constructor(router) {
        this.http = new HttpClient().configure(x => {
            x.withBaseUrl(this.apiUrl);
            x.withHeader('Content-Type', 'application/json');
        });

        this.maRouter = router;
    }

    submit() {

        console.log(this.postData);

        this.http.post('/armory', JSON.stringify(this.postData)).then(response => {
            this.data = response.content;
            this.code = response.statusCode.toString();
            this.loading = false;
        });

        this.maRouter.navigateToRoute('armory', {id: this.data});
    }
}

armory.js

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

export class Armory {

    postData: Object = {};
    data: string = '';
    code: string = '';
    loading: boolean = false;
    http: HttpClient = null;
    apiUrl: string = 'http://localhost:8000/api/v1';
    profileId: number = 0;

    constructor() {
        this.loading = true;

        this.http = new HttpClient().configure(x => {
            x.withBaseUrl(this.apiUrl);
            x.withHeader('Content-Type', 'application/json');
        });
    }

    activate(params, routeConfig) {
        this.profileId = params.id;
        this.getArmoryData();
    }

    getArmoryData() {
        return this.http.get("/armory/" + this.profileId).then(response => {
            this.data = response.content;

            console.log(this.data);

            this.code = response.statusCode.toString();
            this.loading = false;
        });
    }
}

我在这里缺少什么？

感谢您的帮助！

【问题讨论】：

标签： aurelia

【解决方案1】：

请提供您的路由器配置

无论如何，我已经看到了一些问题。当 this.data 未设置时，您尝试导航，只需等待响应：

this.http.post('/armory', JSON.stringify(this.postData)).then(response => {
        this.data = response.content;
        this.code = response.statusCode.toString();
        this.loading = false;
        this.maRouter.navigateToRoute('armory', {id: this.data});
    });

只有this.getArmoryData() 在这里成功（如果需要），我们才会激活页面，canActivate() 也可以使用

activate(params, routeConfig) {
    this.profileId = params.id;
    return this.getArmoryData();
}

在发送数据之前最好在armory .activate() 和submit() 中设置this.loading = true; 和home.js

【讨论】：