Using Model's collection option does not behave intuitively

[furf]

When a Model is created and added to a collection then saved, the model is added to the collection's model properties and the model's events are propagated to the collection.

var c = new Collection({ model: Model });
var m = new Model({});
c.add(m);
m.save();

However, when a model is created using the collection option and saved, it is not added to the collection nor are the events propagated to the model and related collection events triggered.

var c = new Collection({ model: Model });
var m = new Model({}, { collection: c });
m.save();

IMHO, this behavior is less than intuitive. I assumed that the collection option would ultimately bind the model to the collection once saved, but it doesn't. If the only purpose is to pass along the collection's url, why not just pass it literally? (As recommended in the docs.)

If you pass a {collection: ...} as the options, the model gains a collection property that will be used to indicate which collection the model belongs to, and is used to help compute the model's url. The model.collection property is otherwise added automatically when you first add a model to a collection.

{url: "..."} and/or {urlRoot: "..."} options may be passed when creating a new model that needs to have a custom one-off URL endpoint.

var m = new Model({}, { url: c.url });

In my use case, I have a view updating on the collection's add event. I have another view to create the model. I do not want the collection view to update until the model is saved. Therefore, I cannot add the model to the collection until it is saved. The collection options seemed like a clean way to pass collection into the view with the model.

Feel free to close if I misunderstood the intent of this option. If not, I'll be happy to submit an update.

Cheers.

[craig-jennings]

Maybe I'm not seeing the whole picture, but couldn't you just add the model to the collection by passing a success function to the model's save call? Something like this:

var collection = new Collection();
var model = new Model();

model.save({
  success: function() { collection.add(model); }
});

That would allow you to wait until the model has been saved on the server-side before adding it to the collection.

[akre54]

You could also pass wait: true to collection.create for the same result.

[furf]

@craigjennings11 I could, however that would require passing the collection to my "create/edit" view with the model, a minor inconvenience but not an intuitive pattern that I would choose to repeat.

This issue is largely subjective. When I see the collection option, I assume that it could be used to add the model to the collection. It apparently is only used to evaluate the model's route. There are two other options that seem to satisfy this task in a more literal fashion: url and urlRoot.

@akre54 adding wait: true does not address the issues of event propagation. in fact, using collection.create is further inconsistent with my desires as the model's events are not fired, only the collection's and c.models[0] !== m.

var c = new Collection({ model: Model });
var m = new Model({}, { collection: c });
c.create(m);
// c.models[0] !== m

Here is the workaround I am using for the time being:

/**
 * Override save to add model to collection
 */
save: function () {
  if (this.isNew() && this.collection) {
    this.collection.add(this);
  }
  return Backbone.Model.prototype.save.apply(this, arguments);
},

[furf]

caveat: reverting that workaround. the model's attributes are not available at the time the collection's add event fires. :/

[furf]

derp. (also i'm not yet handling wait: true

save: function () {
  var xhr = save.apply(this, arguments);
  if (this.isNew() && this.collection) {
    this.collection.add(this);
  }
  return xhr;
},

[craig-jennings]

It seems like if you're creating the model via var model = new Model({}, { collection: c }); you're already passing the collection to the model. Why not just do

model.save({
  success: function() { model.collection.add(model); })
});

This allows you to directly control when exactly the model is added to the collection.

If the implementation were as you want, it would still be ambiguous as to when the model is added to the collection. Should the model be added when it's created or when it's saved? You've already specified the collection it belongs to, so why not go ahead and add it to that collection immediately? I think the answer to that question would change from person to person depending on what they want at that specific time. Doing it this way allows each user to control when the model is added according to their needs.

[furf]

If the implementation were as you want, it would still be ambiguous as to when the model is added to the collection.

Agreed. IMHO it would make sense to add the model to the collection at time of instantiation.

Of course, I could explicitly save and add (as I am doing now), but then why even have the collection option? It is a less explicit (even vague) variation of the url and urlRoot options. As implemented, the option seems redundant, a bit confusing, and could instead serve a higher purpose, providing the implicit collection.add functionality.

[jashkenas]

but then why even have the collection option?

Really, it's an internal thing.

I think that we documented it because some folks like to do this:

var m = new Model({...}, {collection: c});

m.save(); // Posts to the correct /resource/id endpoint.

... but then never add it to the collection ... perhaps because the collection on the client side is supposed to contain a subset of models that this one-off model doesn't really belong in, despite sharing a common URL endpoint.

The change we could make here would be to remove the documentation, if it's misleading. Actually ... let's just clarify it.

[jashkenas]

But for your use case it sounds like a simple wait: true should do the trick.