Question

I have a form that create a model for a collection. That fires an add event to the collection. I have that binded to a method:

this.collection.bind('add', this.addOne, this)

fires…

addOne: function(tenant) {
   var self = this
   var collection = this.collection

   var view = new TenantView({model: tenant,collection:collection});
   self.$el.append(view.render().el);
}

The create syncs it to the database but, the new appended view still isNew to backbone since it hasn’t fetched the collection and grabbed the id for the new model.

My question, how can I grab the synced model from the server (that has the id and isn’t isNew) without fetching the entire collection then append it?

Answer 1

Use the sync event instead of add…

this.collection.bind('sync', this.addOne, this);

The add event gets fired immediately when calling create; but sync gets fired once the server has responded to the create method, so it should include the correct model id.

You can also wait for the server’s response, before adding the model to the collection — to do that use wait: true in create‘s options hash: collection.create({ ... }, { wait: true }).

Creating a model will cause an immediate “add” event to be triggered on the collection, as well as a “sync” event, once the model has been successfully created on the server. Pass {wait: true} if you’d like to wait for the server before adding the new model to the collection.