CODEWITHSUNDEEP
eventsbackbone.jscoffeescriptbackbone-eventsevent-binding
Blaine Kasten
Blaine Kasten

Reputation: 1693

issues listening to events with backbone

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.

Upvotes: 0

Views: 226

Answers (1)

mu is too short
mu is too short

Reputation: 434675

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'

Upvotes: 1

Related Questions