Question

I’m trying to set up a Backbone application. This code below gives to following error:

Uncaught TypeError: Object # has no method ‘append’

define(
    [
        'jQuery',
        'Underscore',
        'Backbone',
        'text!templates/start.html'
    ],

    function ($, _, Backbone, startTemplate)
    {
        var StartView = Backbone.View.extend({

            // properties
            el: $('#container'),

            initialize: function ()
            {
                this.render();
            },

            render: function ()
            {
                var template = _.template( startTemplate );
                this.el.append( template );
            }
        });

        return new StartView;
    }

);

But this works (see the ‘render’-function):

define(
    [
        'jQuery',
        'Underscore',
        'Backbone',
        'text!templates/start.html'
    ],

    function ($, _, Backbone, startTemplate)
    {
        var StartView = Backbone.View.extend({

            // properties
            el: $('#container'),

            initialize: function ()
            {
                this.render();
            },

            render: function ()
            {
                var template = _.template( startTemplate );
                $(this.el).append( template );
            }
        });

        return new StartView;
    }

);

I am passing $(‘#container’) as the ‘el’-property, so I supposed this should just work fine. Why do I have to use the jQuery notation again for this eg. $(this.el) instead of this.el

Many many thanks in advance!

Answer 1

In Backbone, you simply supply the ID or class name to el:

el: '#container'

Then, this.el references the DOM element, and (if you’re using the latest Backbone), this.$el references the jQuery object.

If your Backbone is up to date, $(this.el) is not necessary