application.js.coffee

$ ->
  window.BR ||= {}
  
  BR.userListWidget = new BR.UserListWidget $('#user-list'),
    length: 20

widgetExample.js.coffee

class BR.UserListWidget
  constructor: (@$list, @options = {}) ->
    # Adds a single handler that instantiates the full widget if/when needed

    # We used to do the full instantiation of every widget on page load, 
    # but that soon started seriously affecting load times
    @$list.on 'click', =>
     @initialize()
     @showList()

  initialize: _.once ->
    # We pre-lookup all DOM elements needed in the class so we don't do duplicate lookups
    @$listItems = $('.js-list-item', @$list)
    @$hideList = $('.js-hide-list', @$list)
    @$form = $('.js-form', @$list)
    @$submitForm = $('.js-submit-form', @$list)

    # All handlers are added in this step
    @$form.on 'submit', (e) =>
     e.preventDefault()
     @$submitForm.attr('disabled', 'disabled')
     @submitForm()

    $(document).on 'click', '.js-list-item', (e) =>
      @selectItem($(e.currentTarget))
      
    # Other misc setup logic
    if @options.length
      $(_.first(@$listItems, @options.lenth)).addClass('shown')

  submitForm: ->
    # submits the form

  selectItem: ($item) ->
    $item.addClass('selected')
    @selectedItem = $item

  showList: ->
    @$list.addClass('shown')