issues listening to events with backbone

Question

I am trying to listen for when my view's "attachmentClicked" function is called in another object. Here is the class which originally calls the event:

class AttachmentView extends AttachmentViewerView
    template: _.template($('#AttachmentViewTemplate').html())
    className: "attachmentView"
    # 
    # initialize ->
    # 
    initialize: ->
        console.log "AttachmentView initialized"
        @render()

    events: {
        'click'     : 'attachmentClicked'
        'dblclick'  : 'openAttachment'
    }

    # 
    # render ->
    # 
    render: ->
        @$el.html(@template(@model.toJSON()))
        $('div.attachmentViewerView').append(@el)
        # @bind 'event', method

    # 
    # attachmentClicked ->
    # 
    attachmentClicked: ->
        @$el.addClass('selectedAttachmentView')

this object calls attachmentClicked upon click, now in another class which created this object, I am trying to listen for that event. Here is that class

class AttachmentViewerView extends AttachmentAppController 

    template: _.template($('#AttachmentViewerTemplate').html())
    className: "attachmentViewerView"

    #
    # initialize ->
    # 
    initialize: (options) ->
        console.log "AttachmentViewer initialized"
        @office = options.office
        @ticket = options.ticket
        @attachmentViews = []

        @render()

    # 
    # render ->
    # 
    render: ->
        @$el.html(@template())
        # Append to fileViewer Div
        $('#attachmentViewerWindow').append(@el)
        @renderFiles()

    # 
    # bindEvents ->
    # 
    bindEvents: (view) ->
        @listenTo view, 'attachmentClicked', @attachmentClicked


    # 
    # renderFiles ->
    # 
    renderFiles: ->
        @attachments = new AttachmentCollection({@office, @ticket})
        @attachments.fetch({
            success: (collection) =>
                _.each collection.models, (model) =>
                    # Create the attachment views and bind events right away
                    @bindEvents new AttachmentView({model: model})
            })

    # 
    # attachmentClicked ->
    # 
    attachmentClicked: (attachment) ->
        console.log( @ )
        @$el.find('.selectedAttachmentView').removeClass('selectedAttachmentView') unless @selected == attachment
        @selected = attachment

so what is happening is that when this class is created, it eventually calls renderFiles which fetches the files from the server, then it creates a view for each returned model and calls bindEvent with that as a param.

Then bindEvent tries to listen to that newly created item's attachmentClicked method and bind it to this classes attachmentClicked function. However, it doesn't work. I've tried several ways and am not sure where my issue is. Guidance would be greatly appreciated.

Answer 1

You're listening for 'attachmentClicked' events on your AttachmentView:

bindEvents: (view) ->
    @listenTo view, 'attachmentClicked', @attachmentClicked

but I don't see anything that will trigger such an event. Setting up some DOM event handlers in a view like this:

events:
    'click'     : 'attachmentClicked'
    'dblclick'  : 'openAttachment'

merely means that a click will trigger an attachmentClicked call, it won't trigger an 'attachmentClicked' Backbone event; if you want that event then you'll have to trigger it yourself:

attachmentClicked: ->
    @$el.addClass('selectedAttachmentView')
    @trigger 'attachmentClicked'