Question

Why is the el undefined on a page refresh or page load? Is it because the el does not exict?

class ListView extends Backbone.View

    className: 'channels-list'
    el: '#main'

    initialize: ->
        console.log @el
        # undefined

Answer 1

The element needs to be a tag name or element that already exists in the DOM. When a new view is created the _ensureElement function is called:

// Ensure that the View has a DOM element to render into.
// If `this.el` is a string, pass it through `$()`, take the first
// matching element, and re-assign it to `el`. Otherwise, create
// an element from the `id`, `className` and `tagName` properties.
_ensureElement: function() {
     //...
}

To avoid this place the script tag below the element tag or wait for the document load event, for example using jQuery:

jQuery ->
    class ListView extends Backbone.View
        className: 'channels-list'
        el: '#main'
        initialize: ->
            console.log @el

Or, as Vitaliy suggested, rest .el in the initialize function.