Nesting Backbone models or collections so that they are linked - api

Question

I have a User entity that has a subscriptions property. This is an array of IDs.
When I perform a fetch, the API will populate those subscriptions, and return something like this:
{
subscriptions: [1, 2, 3],
__subscriptions: [
{
id: 1,
name: 'Example'
},
{
id: 2,
name: 'Example'
},
{
id: 3,
name: 'Example'
}
]
}
I have done this so that I can still perform actions on the original subscriptions and then save them back to the API. Any changes I make to __subscriptions will not be persisted as the API doesn't recognise this field – it is simply the populated data.
In the parse function of my User, I create the nested collection:
parse: function (response) {
this.subscriptions = new Subscriptions(response.__subscriptions)
}
However, if I want to remove a subscription, I have to splice it from the subscriptions field of the User entity, and then I also have to remove it from the subscriptions collected that is nested as a property on the User:
// Clone the subscriptions property, delete the model with a matching ID, and then set it again.
var value = _.clone(this.get('subscriptions'))
// Use splice instead of delete so that we don't leave an undefined value
// in the array
value.splice(value.indexOf(model.id), 1)
// Also remove the same model from the nested collection
var removedSubscription = this.subscriptions.get(model)
this.subscriptions.remove(removedSubscription)
this.set('subscriptions', value)
this.save()
This is sort of annoying. Ideally, removing an ID from the subscriptions property should automatically update the collection.
Does this seem like a good way to deal with nested models and collections? I've heard bad things about Backbone.Relational so I was interested in a simpler solution.

Answer 1

I would listen to events of Subscriptions collection and update subscriptions argument accordingly.
var User = Backbone.Model.extend({
initialize: function () {
this.subscriptions = new Subscriptions;
this.subscriptions.on('add remove', this.updateSubscriptions, this)
},
updateSubscriptions: function() {
this.set('subscriptions', this.subscriptions.pluck('id'))
},
parse: function (response) {
this.subscriptions.reset(response.__subscriptions);
return Backbone.Model.parse.call(this, response);
}
});
So then removing subscription will update subscriptions attribute of user model:
user.subscriptions.remove(subscription)