Dynamically add js object to model array in 1.13

Question

I have the following code:

var msg = this.store.createRecord({text:'first title', createdAt: "2015-06-22T20:06:06+03:00" })

this.get('model.content').pushObject(msg);

msg.save();

We create new record. Then push in it to the model to display. It worked perfectly in 1.9 version but after upgrading it to the newest 1.13 it breaks and shows this error:

TypeError: internalModel.getRecord is not a function

after some researches I came out to this solution

this.get('messages.content').unshiftObject(message.internalModel);

and it partially help. Now I have two problems:

• I'm not confident if using private ember data api is a good idea
• I have an annoying delay between adding record to the model and rendering it on the screen. More than that if I don't call msg.save(); the record isn't rendered. So as far as I understood it waits until we have response from server and only then renders it. But I need opposite behaviour - I need to show the record first and then save it(showing the saving state for the user), this way user thinks that everything goes extrimely fast.

Answer 1

One possible solution without resorting to private API is to use toArray() (github issue):

var array = this.get('messages').toArray()
array.addObjects(this.get('messages'))
array.addObject(msg)
this.set('messages', array)

Answer 2

Before 1.13:

this.get('content').pushObjects(messages);

After 1.13:

messages.forEach(functio(message) {
  this.get('model.content').pushObject(message._internalModel);
});