在ember路由中异步加载表数据

Question

是否可以在没有嵌套路由的情况下异步加载路由中的表？

从下图中，我的网址是/ cm / ccas。加载CCA的API调用可能很重，所以我想异步加载它。

当页面加载并且用户搜索时，我想显示索引路径，这是表格所在的“加载”模板。

如果我向索引添加加载模板，它将替换整个索引路由模板。

我可以使用嵌套路线，但随后我的网址变为/ cm / ccas / index / results似乎......不对。

我正在使用服务进行API调用，不能用户Ember.Data，因为API和模型没有对齐。

export default Ember.Object.extend({
    baseUrl: 'http://localhost:9080/customermaster/api/ccas/',
    getAll: function () {
        return ajax({
                type: 'GET',
                url: this.baseUrl
            }).then(function(response){
                return response.map(function(r) {
                    return CCA.create(r);
                });
            });
    },
    getByInitials: function(initials) {
        return ajax({
            type: 'GET',
            url: this.baseUrl + initials
        }).then(function(response){
            var model = CCA.create(response);

            return model;
        });
    }
});

索引路由（上述服务（ccas）通过初始化程序注入）：

import Ember from 'ember';

export default Ember.Route.extend({
    queryParams: {
        query: {
            refreshModel: true
        }
    },
    model: function (params) {
        if (!params.query) {
            // no query params, return all
            return this.ccas.getAll();
        }

        // todo: call query function
        return this.ccas.getAll();
    }
});

索引模板

<div class="col-lg-12">
    <div class="panel panel-default">
        <div class="panel-heading">Customer Care Associates</div>
        <div class="panel-body">
            <div class="data-table-wrapper">
                <div class="row">
                    <div class="col-sm-2">
                        <div class="form-group input-group">
                            <input type="text" class="form-control" placeholder="Search">
                            <span class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-search"></i></button></span>
                        </div>
                    </div>
                    <div class="col-sm-2 pull-right">
                        <button type="button" class="btn btn-primary pull-right" {{action "new"}}><i class="fa fa-plus-circle"></i> New</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <table class="table table-bordered table-hover table-striped data-table no-footer" role="grid">
                            <thead>
                                <tr>
                                    <th>Initials</th>
                                    <th>Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{#each cca in model}}
                                <tr>
                                    <td>{{cca.initials}}</td>
                                    <td>{{cca.name}}</td>
                                </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>