CODEWITHSUNDEEP
backbone.jsbackbone-eventsbackbone-views
Ian
Ian

Reputation: 39

Backbone.js event handler triggers multiple times

I have a View called Form that renders either a form to edit a list, or the list itself, depending on what argument is passed to render. I've added event handlers so that the show/edit mode can be toggled. I've taken this out from the code below to keep it simple, but this just gives a bit of context to what the View does in context.

I can instantiate this Form view as a child in another view that requires a form, or the list to be rendered, which I've done in the New view, where it would be rendered as a form.

When I need to save, I call the form:save event, which triggers a routine in the Form view that saves the form, I've just made it call a console.log here to show it works. In my code, I call form:save through an $('a#submit').click binding which binds to navigation buttons that are inserted by an ApplicationView (but I don't think that matters for the purposes of this question.)

Lets say I navigate away from the New view, and I go back to it a number of times. When I hit save, the method runs the number of times I have instantiated and rendered a new Form view.

So far:

I've tried doing unbind() and remove() in a close method on the Form view from the New view with no luck.

I think I may have problems with scoping, but I'm unsure.

I know this isn't related to my navigation bindings.

I think this may be to do with zombie views.

Any pointers to make it only run once?

App.Views.New = Support.CompositeView.extend
initialize: (options) ->
    _.bindAll this, 'render'
    @model = new App.Models.Item()

render: ->
    self = this

    form = new App.Views.Form model: @model, collection: @collection

    @$el.append form.render().el

    setTimeout (->
        $('a#submit').click (e) ->
            e.preventDefault()
            App.eventHandler.trigger 'form:save'
    ), 0
    this

App.Views.Form = Support.CompositeView.extend
initialize: ->
    _.bindAll this, 'render', 'save'

    App.eventHandler.on 'form:save', @save

render: ->
    self = this
    # RENDER TEMPLATE HERE
    this

save: ->
    console.log 'form saved'

Upvotes: 2

Views: 2689

Answers (1)

Jack
Jack

Reputation: 10993

I believe your issue is that you are creating a new view each time you want to render the form, but you aren't getting rid of your old view. What you can do is either destroy your old view, or keep a reference to it and instead of creating a new view each time, just pass in the model to the existing view and refresh/rerender the display

Upvotes: 4

Related Questions