Mapping HTML DOM Events to Controller Methods

Technologies / Software Engineering Techniques / Software Engineer Views / Custom Controls (label) / Custom HTML Panel

You can attach element listeners to DOM elements using the event map in your controller. The code below is an example of the event map:

events: {
'click .optionalStep a.edit': function(event) {
this.onEditOptionalStep(event.target.id);
},
'click .optionalStep a.delete': function(event) {
this.onDeleteOptionalStep(event.target.id);
}
},


The event map entry format is as follows:

'eventName elementSelector': functionOrFunctionName


The eventName is a valid DOM event name. See http://en.wikipedia.org/wiki/DOM_events for the complete list of supported events.

The elementSelector is a jQuery selector that specifies DOM element(s) which can trigger the event. See http://api.jquery.com/category/selectors/ for the list of supported selectors. For example:

  • 'click #approveButton' calls the listener when the user clicks on the unique DOM element with the ID approveButton .
  • 'click .bigButton' calls the listener when the user clicks on any DOM element that has CSS class bigButton .
  • 'click img' calls the listener when the user clicks on any <img> element.

Example view: http://localhost:8080/archibus/schema/ab-products/solutions/programming/html/ab-ex-html.axvw