Ember how to refresh model after promise resolved?

I was trying to implement the following functionality: When user clicked a button, it triggers 'createEvent' which sends the data to backend server (a Python server) to insert a record into DB. After that, I'd like to refresh my model to show the latest data.

Howerver, Ember refreshes the model before it was resolved. If I run the following code, it always prints "refreshed." first and then "promise resolved.". Is there a way I could trigger the 'refresh' function after the model is resolved? I don't think it's a good idea to call 'refresh' inside the 'model' function as 'refresh' will fire 'beforeModle', 'model' and 'afterModel' functions.

Thanks!

    
export default Ember.Component.extend({
      title: null,
      actions: {
        createEvent() {
          var data = {
            title: this.get('title')
          }
          let self = this;
          $.ajax({
              type: 'POST',
              url: ENV.host + '/create_event',
              data: data,
              success: function(response) {
                // calls 'addEvent' to refresh model.
                // but it doesn't work!
                self.sendAction('addEvent', response);
              }
          });
        }
      }
    });

    export default Ember.Route.extend({
      model() {
        return this.store.findAll('event').then(function(events) {
          console.log("promise resolved.");
          return events.sortBy('date').reverse();
        });
      },
      actions: {
        reload: function() {
          this.refresh();
          console.log("refreshed.");
        }
      }
    });

    export default Ember.Controller.extend({
      actions: {
        addEvent: function(response) {
            self.send('reload');
        }
      }
    });

DEBUG: Ember      : 2.5.1
DEBUG: Ember Data : 2.6.0
DEBUG: jQuery     : 2.2.4