Backbone Relational: remove event not fired

Question

I'm trying to setup a little pair of models with Backbone Relational but I don't understand how the remove event is fired.

Here's my models code:

var Car = Backbone.RelationalModel.extend({
    idAttribute: "id"
});

var Cars = Backbone.Collection.extend({
    model: Car
});

var CarCollection = new Cars();

var User = Backbone.RelationalModel.extend({

    idAttribute: 'id',
    relations: [{
        type: Backbone.HasMany,
        key: 'model',
        relatedModel: Car,
        collectionType: Cars,
        includeInJSON: 'model',
        reverseRelation: {
            key: 'ownedBy',
            includeinJSON: 'name'
        }
    }]

  });

var Users = Backbone.Collection.extend({
    model: User
});

var UserCollection = new Users();

//Bootstrap data and put it in the collections

var carsData = [
    {id:1, model:'500',ownedBy:1},
    {id:2, model:'Corsa',ownedBy:2},
    {id:3, model:'Civic',ownedBy:2}
];

var usersData = [
    {id:1,name:'Dude'},
    {id:2,name:'Mark'}
];

CarCollection.add(carsData);
UserCollection.add(usersData);

What I get, in JSON, is that:

UserCollection = {"id":1,"name":"Dude","model":["500"]}{"id":2,"name":"Mark","model":["Corsa","Civic"]}

CarCollection = {"id":1,"model":"500","ownedBy":"Dude"}{"id":2,"model":"Corsa","ownedBy":"Mark"}{"id":3,"model":"Civic","ownedBy":"Mark"}

Now if I add an element to CarCollection like this:

CarCollection.add({id:4,model:'Prius',ownedBy:1};);

The 'add' event is fired, but if I remove one element from the collection:

var el = CarCollection.get(1);
CarCollection.remove(el);

No event is fired.

I've resolved it with some workaround, like:

var el = CarCollection.get(1);
el.destroy();

or by unregister it directly in Backbone.store:

Backbone.Relational.store.unregister(el);

or just setting ownedBy to null:

var el = CarCollection.get(1);
el.set("ownedBy",null);

Is this the right behavior of the plugin? Or I've configured my models in the wrong way? Thanks for every answers.

score 0 · Answer 1 · answered Dec 18 '12 at 14:07

0

You have to pass a model to remove not the index

Collection.remove(model)

You can do the following:

CarCollection.remove(CarCollection.at(0));

to remove the model with index 0 or ...

CarCollection.remove(CarCollection.get(4));

to remove the model with id 4

answered Dec 18 '12 at 14:07

Ingemar

1,638
2
12
15

Sorry, I've put the wrong example in my code, I have updated it now. I've already tried in the way you are suggesting. If I log the CarCollection after the remove it contains just 2 elements (correct) but the UserCollection it's not updated and the remove:model event is not fired :\ – Ingro Dec 18 '12 at 15:05
I don't know if this is your full code, but in your example you haven't tied up CarCollection to the User. I think your RelationalModel aka User has its own instance of Cars (which stays empty). Btw. I havn't used Backbone.RelationalModel, so this is only a guess. – Ingemar Dec 18 '12 at 15:30
Well `reverseRelation` in `User` RelationalModel should take care of that. In fact `CarCollection.add()` fire the related event. Another way I found to fire the remove event is just set to null the `ownedBy` value of an element inside `CarCollection`. Maybe this is just the right behavior, but I cannot find anything to confirm that on the Docs. Thanks anyway for your help! – Ingro Dec 18 '12 at 17:52

Backbone Relational: remove event not fired

1 Answers1