Question

My events are not loading automatically. When I added delegateEvents() at the end of the render() method, it worked for a while. I do not want to use delegateEvents, but now, even with delegateEvents the events are not loading.

I reckon the DOM is not known at the time, so the events aren’t bound, but how do I check (debug) that?

View:

class EditGroup extends BaseView
    initialize: ->
        @render()

    render: ->
        html = _.template tpl, @model.toJSON()
        @$el.html html

        for own key, options of FormConfig[@model.type]             
            options.key = key
            options.value = @model.get key
            input = new Input options
            input.on 'valuechanged', (key, value) => @model.set key, value

            @$('section.'+key).html input.$el

        @delegateEvents() # doesn't work

        @

DOM:

h2 Edit Group

section.title
section.type
section.members

button.save.btn.btn-primary(onclick="return false") Save changes

In the sections type and member there are typeaheads and selects rendered (Backbone views). One works without delegateEvents and the other works with. The events in the parent view (shown above) don’t work at all. Removing the for-loop doesn’t make any difference.

Answer 1

Ok, I solved it, but I don’t understand the workings.

I’m using a ‘view manager’, which registers all views and shows (read: attaches the html to the DOM) the parent view. The view manager’s show function is triggered when a new route is fired, but the route was fired double, once as “route:edit” and once as “route”. I catch them with router.on “all”, (eventName) -> etc.. I reckon the events are bound to the html, but the html is overridden by the second router event without the bindings and attached to the DOM. Question remains why the route is fired twice.