Question

I don’t think this is an uncommon problem, but I haven’t been able to make any of the solutions I’ve found work. Here’s my [simplified] view:

class MyView extends Backbone.View
    el: '#mydiv'

    initialize: ->
        @collection.bind 'reset', @render, @

    render: ->
        $(@el).html('my content')

When reset is triggered, render‘s this has been clobbered, and @el is undefined. My understanding was that the 3rd parameter on bind was supposed to take care of this, but that doesn’t appear to be happening. I am using Backbone 0.5.3.

I also tried using the “fat arrow” on render, but that didn’t work either:

    render: =>
        $(@el).html('my content')

Update

As Trevor Burnham pointed out below, it wasn’t a scoping issue, it was that my el property wasn’t available at page load (it get’s created later). I’m still looking for a better way to deal with that (using the id property on the view).

Answer 1

I don’t think the problem is that render is called in the wrong context, but rather that the view’s el property is never a DOM element. Does something with the ID mydiv exist at the time that you call new MyView? If not, that’s the problem.

Internally, when el is a string, Backbone makes the call

this.el = $(this.el).get(0);

from the view’s constructor. If nothing matching that selector string exists, @el will be undefined, which is what you’re seeing.