Question

我正在使用Ember App Kit。我有一个带有学生姓名的表单，我可以毫无问题地将数据保存到数据库中。问题是，只要我从另一个页面转换回此路径（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

尝试在路由（here）中设置控制器，而不是在控制器中使用init方法。这是路线责任之一。

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

事实是Ember创建了一次控制器，并根据model和setupController挂钩更改了内容。所以控制器的init方法只需调用一次，每次转换到路径时都会得到相同的记录。

要解决这个问题，你可以这样做：

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);
    },
});

我希望这可以帮到你！

Answer 2

 actions: {
    acceptChanges: function () {
        var self = this;
        self.get('newStudent').save().then(function(student){
            self.set('newStudent','');
            self.transitionToRoute('students');
        });
    }
}

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

2 个答案: