Ember push record in model and update template - ember.js

Question

I have this route in my Ember app:
model: function(params, transition) {
var self = this;
return Ember.RSVP.hash({
photo: self.store.find('photo', params.id),
comments: self.store.query('comment', {id: params.id})
});
},
actions: {
newComment: function(comment) {
var record = this.store.createRecord('comment', comment);
}
}
The template:
{{#each model.comments as |comment|}}
<div class="card">
<div data-userId="{{comment.userId}}">
<b>{{comment.username}}</b>
</div>
<div>
{{comment.content}}
</div>
<span class="hide-on-small-only">{{i18n 'createdAt_lbl'}}: </span>{{format comment.createdAt type='date'}}
</div>
{{/each}}
{{post-comment newComment='newComment' comments=model.comments}}
and the comment model:
export default DS.Model.extend({
commentHash: DS.attr('string'),
content: DS.attr('string'),
createdAt: DS.attr('date'),
username: DS.attr('string'),
userHash: DS.attr('string'),
userId: DS.attr('number'),
});
The post-comment component is the one responsible to call the newComment action:
// post-comment component
var self = this;
// get the new comment content from textarea
var $contentArea = this.$('#postCommentContent');
var content = $contentArea.val();
var newComment = {
userId: localStorage.getItem('userId'),
content: content,
createdAt: moment().format('MMMM Do YYYY, h:mm:ss a')
};
self.sendAction('newComment', newComment);
What I need is to be able to add a new local comment (without persisting it on the server) dinamically and make the template update to show the newly added record without a complete page refresh

Answer 1

Make a modifiable copy of the list of comments and keep it on the controller:
setupController(controller, model) {
this._super(...arguments);
controller.set('comments', model.comments.toArray());
}
The reason you need to make a copy is that the return value from store.query is, for various reasons, unwritable. There may be other ways to make a copy but toArray seems to work well.
Add the new comment to this list after creating it:
actions: {
newComment: function(comment) {
var record = this.store.createRecord('comment', comment);
this.get('comments').pushObject(record);
}
}
In your template, loop over the controller property:
{#each comments as |comment|}}

Answer 2

It should simply work like this:
newComment: function(comment) {
var record = this.store.createRecord('comment', comment);
var commentsModel = this.get('model.comments'); // or this.get('comments'), depending where you action resides
commentsModel.pushObject(record);
this.set('model.comments', commentsModel); // or this.set('comments'), depending where you action resides
}
This only works if you actually have comments. If not, you first need to initialize your comments as an empty array. Otherwise:
newComment: function(comment) {
var record = this.store.createRecord('comment', comment);
var commentsModel = this.get('model.comments'); // or this.get('comments'), depending where you action resides
if(!commentsModel){
commentsModel = Ember.A();
}
commentsModel.pushObject(record);
this.set('model.comments', commentsModel); // or this.set('comments'), depending where you action resides
}
}