Question

我有一个小应用程序，使用ember.js编写，使用RESTAdapter与REST API对话，并使用ArrayController在列表中显示元素。当我向服务器执行POST请求并使用代码201（已创建）和具有id的模型进行响应时，新模型将显示在列表中。但是，如果服务器返回代码409（冲突）与看起来像这样的有效负载

{
   'errors': ['Error description']
}

我希望该模型不会被添加到列表中，但事实并非如此。该模型仍然添加到列表中，但没有ID。

我发现这个模型可以通过多种方式删除，但我不知道哪个是正确的。

所以问题是：

在这种情况下处理错误的正确方法是什么（当您使用ArrayController和RESTAdapter时）？
如果服务器返回4xx代码，是否可以阻止模型显示在列表中？

以下是我现在使用的代码：

App.Usergroup = DS.Model.extend({
    name: DS.attr('string'),
    description: DS.attr('string'),
});

App.UsergroupsListController = Ember.ArrayController.extend({
    needs: ['usergroups'],
    allUsergroups: Ember.computed.alias('controllers.usergroups'),
    itemController: 'usergroup'
});

App.UsergroupController = Ember.ObjectController.extend({
    actions: {
        removeGroup: function() {
            var group = this.get('model');
            group.deleteRecord();
            group.save();
        }
    }
});

App.UsergroupsController = Ember.ArrayController.extend({
    actions: {
        addUsergroup: function() {
            var model = this.get('model');
            var group = this.store.createRecord('usergroup', {
                name: model.name,
                description: model.description
            });
            group.save().then(function() {              
            },
            function(error){
                group.rollback();
            });
            this.transitionTo('usergroups.index');
        }
    }
});

以下是模板摘录：

<script type="text/x-handlebars" id="usergroups">
    <div class="header">
        <h1>User groups list</h1>
    </div>

    <div class="content">
        <form class="pure-form">
            <fieldset>
                {{input valueBinding="model.name" placeholder="Name"}}
                {{input valueBinding="model.description" placeholder="Description"}}
                <button type="submit" {{action 'addUsergroup'}} class="pure-button pure-button-primary">Add</button>
            </fieldset>
        </form>

        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" id="usergroups-list">
    {{#if model}}
    <table class="pure-table pure-table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Description</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {{#each}}
            <tr>
                <td>{{id}}</td>
                <td>{{name}}</td>
                <td>{{description}}</td>
                <td><button class="pure-button" {{action "removeGroup"}}><i class="fa fa-trash"></i> Remove</button></td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    {{else}}
        <p>No user groups.</p>
    {{/if}}
</script>

Answer 1

Ember提供错误路线和装载路线在此处阅读更多相关信息 - Ember error route

因此当Usergroup模型抛出错误时，Ember将查找UsergroupErrorRoute或用户组/错误模板。

你可以做的就是你可以拥有

<script type="text/x-handlebars" data-template-name="usergroup/error">
{{message}}
<script>

从路径转移{{message}}

Answer 2

因此，正如我所发现的那样，错误应该在Route处理。

目前我的路线如下：

App.UsergroupsRoute = App.AuthenticatedRoute.extend({
    model: function() {
        return this.store.find('usergroup');
    },
    redirectToLogin: function(transition) {
        var loginController = this.controllerFor('login');
        loginController.set('attemptedTransition', transition);
        this.transitionTo('login');
    },
    actions: {
        error: function(reason, transition) {
            if (reason.status == 401) {
                this.redirectToLogin(transition);
            }
            else {
                alert('Something went wrong');
            }
        }
    }
});

它运作得很好并且应该做到了。但现在我无法得到在Route中处理错误的原因是什么？

我应该如何处理Ember.js中服务器的错误？

2 个答案: