this.on() is used to rebind all event handlers when this.options has changed. It can also be used to bind or delegate from other elements or objects.

Rebinding

By using templated event handlers, a control can listen to objects outside this.element. This is extremely common in MVC programming. For example, the following control might listen to a task model's completed property and toggle a strike className like:

TaskStriker = Control({
    "{task} completed": function(){
        this.update();
    },
    update: function(){
        if ( this.options.task.completed ) {
            this.element.addClass( 'strike' );
        } else {
            this.element.removeClass( 'strike' );
        }
    }
});

var taskstriker = new TaskStriker({
    task: new Task({ completed: 'true' })
});

To update the taskstriker's task, add a task method that updates this.options and rebinds the event handlers for the new task like:

TaskStriker = Control({
    "{task} completed": function(){
        this.update();
    },
    update: function() {
        if ( this.options.task.completed ) {
            this.element.addClass( 'strike' );
        } else {
            this.element.removeClass( 'strike' );
        }
    },
    task: function( newTask ) {
            this.options.task = newTask;
            this.on();
            this.update();
    }
});

var taskstriker = new TaskStriker({
    task: new Task({ completed: true })
});

// Now, add a new task that is not yet completed
taskstriker.task(new Task({ completed: false }));

Adding new events

If events need to be bound to outside of the control and templated event handlers are not sufficient, you can call this.on to bind or delegate programmatically:

init: function() {
    // calls somethingClicked( el, ev )
    this.on( 'click', 'somethingClicked' );

    // calls function when the window is clicked
    this.on( window, 'click', function( ev ) {
        // do something
    });
},
    somethingClicked: function( el, ev ) {
     // ...
}