Question

App.Views.VideoView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render');
        this.model = this.options.model;
        this.render();
    },
    render: function() {
        JST.video({
            model: this.model
        });
        return this;
    }
});

App.Views.PlayListView = Backbone.View.extend({
    el: $("#playlistWrapper"),
    initialize: function(videos) {
        _.bindAll(this, 'render');
        this.modelViews = $.map(videos.models, function(model, i) {
            return new App.Views.VideoView({
                model: model
            });
        })
        this.render();

    },
    render: function() {
        var that = this;
        $(this.el).clear();
        $.each(this.modelViews, function(i, modelView) {
            $(that).el.append(modelView.render().el);
        });

        return this;
    }
});

i am always getting below error

$(this.el).clear is not a function
[Break On This Error] $(this.el).clear(); 

it seems my el of PlayerListView is empty.

i have div with id playlistWrapper.

if i use jquery selector for playlistWrapper it gives proper element.

what am i doing wrong.

Answer 1

I’m a little late to the party on this, but the problem is that you’re specifying a jquery selector before the DOM is loaded.

A backbone object is defined with an object literal passed in to the extend method. For example, the following are functionally the same:

MyView = Backbone.View.extend({
  el: "#foo"
});

var viewObj = {el: "#foo"};
MyView2 = Backbone.View.extend(viewObj);

values on the right-hand side of a key/value pair in an object literal are parsed and executed immediately. this means that a jQuery selector used for el will be parsed as soon as you declare it, not when the view is instantiated. chances are, you have your javascript file included in your app and it’s being downloaded before the DOM is loaded, so the jquery selector can’t find the element you’re referring to.

There are a number of things you can do to work around this.

• you can call $(this.el) whenever you need to use the element
• you can set this.el in the view initializer
• you can set {el: $("#whatever")} as a parameter to the view constructor, assuming the view is constructed after the DOM has loaded
• you can use the javascript module pattern to defer definition of the views and other backbone objects until after the DOM is loaded
• and probably a handful of other options that i’m not thinking of at the moment