Rojakcoder

Of Linux, Programming, and Singaporean Ramblings

Backbone Events

Backbone events are a powerful way to write responsive user interfaces with fewer lines of codes. This article attempts to give a detailed breakdown of the events and the parameters available for the callback functions.

The results in this article are applicable for version 1.2.3 of Backbone.js

The test is performed by instantiating instances of ExperimentModel extended from Backbone.Model and ExperimentCollection extended from Backbone.Collection.

The model is first added to the collection to test "add" on the collection and then a properrty is set on the model.

var expModelA = new ExperimentModel({ id: 'a' });
var expCollA = new ExperimentCollection();
HUGOMORE42

Add

expCollA.on('add', function (model, collection, obj) {
    ...
});
expModelA.on('add', function (model, collection, obj) {
    ...
});
expCollA.add(expModelA);

In both of the callback functions 3 parameters are passed:

1. model
The model being added to the collection.
2. collection
The collection after the model is added.
3. operation object
A map containing the following keys (and values):
  • merge (false)
  • add (true)
  • remove (false)

Event Model Collection
add
Event is triggered on the model and collection (in this sequence) when the model is added to the collection.

Remove

expModelA.on('remove', function (model, collection, obj) {
    ...
});
expCollA.on('remove', function (model, collection, obj) {
    ...
});
expCollA.remove(expModelA);

In both of the callback functions 3 parameters are passed:

1. model
The model being added to the collection.
2. collection
The collection after the model is added.
3. operation object
A map containing the following key (and value):
  • index (the position in the collection of the model that was removed).

Event Model Collection
remove
Event is triggered on the model and collection (in this sequence) when the model is removed from the collection.

Update

expCollA.on('update', function (collection, obj) {
    ...
});
expCollA.add(expModelA);
expCollA.remove(expModelA);

The update event is only called on the collection when a model is added to or removed from the collection. Its callback function receives two parameters:

1. collection
The collection after the model is added.
2. operation object
A map that contains different keys and values depending on the type of operation (add or remove). See Add and Remove for details.

Event Model Collection
update
Event is triggered on the collection after add and remove

Sort

expCollA.on('sort', function (collection, obj) {
    ...
});

This event can be triggered when a model is added to/removed from the collection. It can also be triggered by a call to sort()

collection
The collection after the model is added.
operation object
A map containing the following keys:
  • merge (boolean)
  • add (boolean)
  • remove (boolean)
The values in this map indicate the operation that occurred that triggered the event. If this event was triggered by invocation of sort, this map will be empty.

Event Model Collection
sort

Change

expModelA.on('change', function (model) {
    ...
});
expCollA.on('change', function (model) {
    ...
});

This event is triggered on both the model that was changed, and the collection that the model is in.

model
The model that was changed.

Event Model Collection
change

Reset

expCollA.on('reset', function (collection, obj) {
    ...
});
expCollA.reset();

The reset event is invoked by the reset() method. This method accepts an optional parameter that is the list of models used to replace the collection. The callback function receives 2 parameters:

collection
The collection after the reset operation is completed.
options
This object has the previousModels property that holds the models that were replaced by the reset() operation.

Event Model Collection
reset
comments powered by Disqus

Related contents