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?