Updating index model when child model is changed


#1

So say I have an index model that displays a table of followers, each row has an edit button that goes to a route called followers/edit

this.route('followers', function() {
  this.route('new');
  this.route('edit', { path: ':follower_id/edit'});
});

In the edit template I display each model attribute in an input inside a form that on submit persists the changes to my express api

<form {{action "editFollower" on="submit"}}>
  <div class="form-group">
    <label for="username">Username</label>
    {{input value=model.username name="username" class="form-control" placeholder="Username"}}
  </div>
  <div class="form-group">
    <label for="minutes">Minutes</label>
    {{input value=model.minutes name="minutes" class="form-control" placeholder="Minutes"}}
  </div>
  <div class="form-group">
    <label for="currency">Currency</label>
    {{input value=model.currency name="currency" class="form-control" placeholder="Currency"}}
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

The controller action to do this looks like this

editFollower: function(defer) {
	var self = this;
  var follower = self.get('model');
  follower.save().then(function(){
  	self.get('notify').success('Follower edited');
    self.transitionToRoute('followers.index');
  }).catch(function(){
  	alert('there was a problem');
  });
}

Here is am setting self so I can use it in the promise callback, I then get the follower which is the current model, save it and then listen for the promise to return and transition back to the followers.index route where the table of followers is being displayed.

When I actually do this it saves back to the database but I have to then refresh the followers.index page to get the updates to populate into this table. Why is this parent model not being updated when I edit and save the child model?