bind

bind binds event handlers to property changes on can.Maps. When you change a property using attr, two events are fired on the Map, allowing other parts of your application to map the changes to the object.

The change event

The first event that is fired is the change event. The change event is useful if you want to react to all changes on an Map.

var o = new can.Map({});
o.bind('change', function(ev, attr, how, newVal, oldVal) {
    console.log('Something changed.');
});

The parameters of the event handler for the change event are:

• ev The event object.
• attr Which property changed.
• how Whether the property was added, removed, or set. Possible values are 'add', 'remove', or 'set'.
• newVal The value of the property after the change. newVal will be undefined if the property was removed.
• oldVal Thishe value of the property before the change. oldVal will be undefined if the property was added.

Here is a concrete tour through the change event handler's arguments:

var o = new can.Map({});
o.bind('change', function(ev, attr, how, newVal, oldVal) {
    console.log(ev + ', ' + attr + ', ' + how + ', ' + newVal + ', ' + oldVal);
});

o.attr('a', 'Alexis'); // [object Object], a, add, Alexis, undefined
o.attr('a', 'Adam');   // [object Object], a, set, Adam, Alexis
o.attr({
    'a': 'Alice',      // [object Object], a, set, Alice, Adam
    'b': 'Bob'         // [object Object], b, add, Bob, undefined
});
o.removeAttr('a');     // [object Object], a, remove, undefined, Alice

(See also removeAttr, which removes properties).

The property name event

The second event that is fired is an event whose type is the same as the changed property's name. This event is useful for noticing changes to a specific property.

var o = new can.Map({});
o.bind('a', function(ev, newVal, oldVal) {
    console.log('The value of a changed.');
});

The parameters of the event handler for the property name event are:

• ev The event object.
• newVal The value of the property after the change. newVal will be undefined if the property was removed.
• oldVal The value of the property before the change. oldVal will be undefined if the property was added.

Here is a concrete tour through the property name event handler's arguments:

var o = new can.Map({});
o.bind('a', function(ev, newVal, oldVal) {
    console.log(ev + ', ' + newVal + ', ' + oldVal);
});

o.attr('a', 'Alexis'); // [object Object], Alexis, undefined
o.attr('a', 'Adam');   // [object Object], Adam, Alexis
o.attr({
    'a': 'Alice',      // [object Object], Alice, Adam
    'b': 'Bob'
});
o.removeAttr('a');     // [object Object], undefined, Alice

See also

More information about changing properties on Observes can be found under attr.

For a more specific way to changes on Observes, see the delegate plugin.