Two ways of structuring Controls.js collection classes.

collection-styles.coffee

# uses dummy elements to listen for/dispatch events
class ControlCollectionA extends Array
 
  constructor : ( arr ) ->
    this.push( item ) for item in arr
    this.el = document.createElement "dummy"
  
  on : ( eventType, handler ) ->
    thisEl = this.el
    thisEl.addEventListener eventType, handler.bind( this ), false
    for component in this
      component.el.addEventListener eventType, ( event ) ->
        thisEl.dispatchEvent( event )
      , false
    return this
  
  trigger : ( event ) ->
    this.el.dispatchEvent event
    return this
 
  # other class methods here...
 
 
# Passes event listeners down the chain
class ControlCollectionB extends Array

  constructor : ( arr ) ->
    this.push( item ) for item in arr
 
  on : ( eventType, handler ) ->
    handler = handler.bind( this )
    for component in this
      component.on eventType, handler
    return this
 
  trigger : ( event ) ->
    for component in this
      component.trigger event
    return this
  
  # other class methods here...
 

 # Same ControlComponent class can be used with either collection class.
 class ControlComponent
  
  constructor : ( el ) ->
    this.el = el
  
  on : ( eventType, handler ) ->
    this.el.addEventListener eventType, handler.bind( this ), false
   
  trigger : ( event ) ->
   this.el.dispatchEvent( event )