Ember.js - How to clear the form data after saving the record?

Question

I'm using Ember App Kit. I have a form that takes a student name and I can save the data into a database without any problem. The problem is the data (student name) retains on the form whenever I get transition back to this route (http://localhost:8000/#/students/new) from another page. If I refresh the screen, then the data will be cleared out and I will get a fresh form. What am I doing wrong?

Also, if I decide not to save or add the record and go to see the list of students, I see an empty record on screen. That record is not in the database though. How can I prevent that?

//--------------------------------------------
// 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

Try to setup the controller in you route (here) instead of using the init method in the controller. It's one of the routes responsibilities.

I think the problem is that you assume that every time you transition to the StudentsNewRoute a new StudentsNewController is created, and thus the init method is called.

The truth is Ember creates the controller once and changes it's content based on the model and the setupController hooks. So the init method of the controller it's called once and you end up with the same record every time you transition to the route.

To solve this you'd do something like this:

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

I hope this helps you!