How to get trigger to listen properly

Question

I am having a hard time getting my trigger to respond properly. I have plenty that are working but one of them isn't and I can't understand why.

Here is my AppController class

class ProjectOrder.View.AppController extends Backbone.View
  initialize: ->
    @promptOfficeSearch()

  promptOfficeSearch: ->
    officeSearch = new ProjectOrder.View.OfficeSearch
    officeSearch.on 'createOffice', @promptOfficeCreate
    officeSearch.on 'createTicket', @promptTicketCreate
    officeSearch.on 'accountAndTicketExist', @killProcessAccountExists


 promptOfficeCreate: (serial) ->
   @officeModel = new ProjectOrder.Model.OfficeModel()
   @officeModel.set('serial_number', serial)

   officeCreate = new ProjectOrder.View.OfficeCreator({model: @officeModel})
   officeCreate.on 'createTicketOffAccount', @promptTicketCreate

 promptTicketCreate: (model) ->
   console.log 'promptTicketCreate'
   model = model || @officeModel
   ticketModel = new ProjectOrder.Model.TicketModel()
   new ProjectOrder.View.TicketCreator({ticketModel: ticketModel, officeModel: model})

 killProcessAccountExists: (ticket_id) ->
   msg = document.createElement 'div'
   msg.className = 'account-exists-msg'
   msg.innerHTML = "Account already exists. Redirecting to ticket #{ticket_id}..."

   $('#create-order-div').append(msg)
   setTimeout((->
     window.location = "/pto/#{ticket_id}"
   ), 2000)

All of the triggers from the officeSearch object in the promptOfficeSearch function work properly. They are all triggered as follows, respectively:

@trigger 'createOffice', serial
@trigger 'createTicket', data.model[0]
@trigger 'accountAndTicketExist', data.model

But with the officeCreate object in the promptOfficeCreate, it does not respond to the createTicketOffAccount event which is registered in the submitOffice ajax success callback in my OfficeCreator class:

class ProjectOrder.View.OfficeCreator extends Backbone.View
  template: _.template($("#OfficeCreator").html())
  id: 'office-creator'
  events:
    'click .submit'     : 'submitOffice'

  initialize: ->
    @render()

  render: ->
    @$el.html(@template(@model.toJSON()))
    $('#create-order-div').append(@$el)

  submitOffice: ->
    @setModelData()
    @model.save(null,{
      success: (model) =>
        @trigger 'createTicketOffAccount', model
        #@$el.remove()
      error: ->
        alert 'error'
    })

  setModelData: ->
    @model.set({
      office_name:    $('#office').val()
      doctor_name:    $('#doctor').val()
      emr:            $('#has-emr').is(':checked')
      forms_builder:  $('#has-forms').is(':checked')
      iehr:           $('#has-iehr').is(':checked')
      clipboard:      $('#has-clip').is(':checked')
      specialty_id:  $('#specialty').val()
    })

any ideas why my trigger is not working?

Answer 1

I think you need fat arrows on all the methods in your AppController class.

When this event fires:

officeSearch.on 'createOffice', @promptOfficeCreate

the promptOfficeCreate function gets invoked as a normal function as opposed to a method bound to your controller instance as this, so when this happens:

officeCreate.on 'createTicketOffAccount', @promptTicketCreate

@promptTicketCreate is undefined and the event binding doesn't wire up properly.