Ember.js - 保存记录后如何清除表单数据？

Question

我正在使用 Ember 应用套件。我有一个带有学生姓名的表格，我可以毫无问题地将数据保存到数据库中。问题是每当我从另一个页面转换回这条路线( http://localhost:8000/#/students/new )时，数据(学生姓名)都会保留在表格中。如果我刷新屏幕，那么数据将被清除，我会得到一个新的表格。我究竟做错了什么？

此外，如果我决定不保存或添加记录并查看学生列表，我会在屏幕上看到一条空记录。但是，该记录不在数据库中。我怎样才能防止这种情况？

//--------------------------------------------
// Controller

var StudentsNewController = Ember.ObjectController.extend({
    init: function() {
        var newSystem = this.store.createRecord('student');
        this.set('newStudent', newStudent);
        this._super();
    },
    actions: {
        acceptChanges: function () {
            var self = this;
            self.get('newStudent').save().then(function(student){
                self.transitionToRoute('students');
            });
        }
    }
});

export default StudentsNewController;

//--------------------------------------------    
// Model

var Student = DS.Model.extend({
    name: DS.attr('string'),
    major: DS.belongsTo('major')

});

export default Student;

//--------------------------------------------    
// Template

    <form  {{action 'updateSystem' on="submit"}}>
        <fieldset>
                <div>
                    <label>Student Name</label>
                    {{input value=newStudent.name size="50"}}
                </div>
                <button {{action 'acceptChanges'}}>Add</button>
        </fieldset>
    </form>

Answer 1

尝试在您的路由中设置 Controller ( here )而不是使用 init Controller 中的方法。这是路线职责之一。

我认为问题在于您假设每次转换到 StudentsNewRoute一个新的StudentsNewController被创建，因此 init方法被调用。

事实上，Ember 创建了一次 Controller 并根据 model 更改其内容。和 setupController钩子(Hook)。所以init Controller 的方法它被调用一次，每次转换到路由时都会得到相同的记录。

要解决这个问题，你会做这样的事情:

var StudentsNewController = Ember.ObjectController.extend({
    newStudent: null,
    actions: {
        acceptChanges: function () {
            this.get('newStudent').save().then((student) => {
                this.transitionToRoute('students');
            });
        }
    }
});
//--------------------------------------------
var StudentsNewRoute = Ember.Route.extend({

    model: function() {
        return this.store.createRecord('student');
    },

    setupController: function(controller, model) {
        controller.set('newStudent', model);
    },
});

我希望这可以帮助你!