Why does Backbone's collection create() method not populate the id?

Question

In my view's method below, my model gets synced with the server if I understand the create() method properly. However, the console.log of this.model.id still returns undefined and this.model.isNew() returns true. The POST shows an id in the return JSON object and the model object attributes show an id as well, so why are they not reflecting properly in the model? I need the id to be set when I create the new view.

submitForm: function( e ) {
  e.preventDefault();

  this.model.set( this.$( '.editForm' ).serializeObject() );

  if ( this.model.isNew() )   {
    collection.create( this.model );

    console.log( this.model, this.model.id, this.model.isNew() );

    new MyView({
      model: this.model
    }).render().appendNode();
  }   else   {
    this.model.save();
  }

  this.closeForm();
}

Thanks for formatting it for me @mu. SO wouldn't let me format my code properly... dunno what happened there. — jacobroufa, Apr 16 '14 at 02:48
No worries. You wanted to use the `{ }` button rather than then `"` button in the editor. — mu is too short, Apr 16 '14 at 03:41

Leonardo Barbosa · Accepted Answer · 2014-04-16T03:15:17.103

So Jacob, the problem here is just that before rendering your view, you need to wait the response from the server. Your this.model.id will be undefined because your model is new, that means that it was not saved in the server yet.

So, what you could do is to work with the success callback from the .create function. I believe that something like this would work for you.

if (this.model.isNew()) {
  collection.create({
    // or you can use this.model (if it is an object)
    attribute_x: 'val',
    attribute_y: 'val'
  }, success: function(response){
    // here your model with have an id
    console.log(response);
    new MyView({
      model: response.model // check your response
    }).render().appendNode();             
  });
} else {
  new MyView({
    model: this.model
  }).render().appendNode();
}

So, as you can see, in the success callback, we render the View. And if you console.log the response you'll see what your back-end responded to you in the creation of the model.

I got the id from the response as expected using the success callback. Thanks @LeonardoR.! — jacobroufa, Apr 16 '14 at 03:19

score 3 · Answer 2 · answered Apr 16 '14 at 03:12

If you want, you can use the { wait: true } option when invoking create(); that way, the model won't be added to the collection until after it's successfully saved.

Combining this with having the rest of your logic occur on the collection's add event should take you a long way, probably. If you need to be able to distinguish between newly create'd models and ones added to the collection later, you can add another option to the create call (something like newlySaved: true, and then check for options.newlySaved in the add event callback).

I think I need to reorganize more of my code for that to work, but thanks for clarification on the `wait` flag! — jacobroufa, Apr 16 '14 at 03:18

Why does Backbone's collection create() method not populate the id?

2 Answers2