Backbone.js el is not working

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

Answer 2

Well clear is not a jQuery function... You might be looking for empty?

Comments on your code:

In you video view:

• no need to assign the model from the options, this is done for you
• you might want to append the result of the templating (JST) to this.el otherwise nothing will show up...

In your playlist view:

• in your render, in your each loop, change $(that).el to $(that.el)
• since you define el as a jQuery, you do not need to use $(this.el) over and over