Backbone.js el не работает

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;
    }
});

Я всегда становлюсь ниже ошибки

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

Кажется, мой el PlayerListView пуст.

У меня есть div с id playlistWrapper.

Если я использую селектор jquery для playlistWrapper, он дает правильный элемент.

что я делаю неправильно.

Ответ 1

Я немного опаздываю на вечеринку по этому вопросу, но проблема в том, что вы указываете селектор jquery перед загрузкой DOM.

Основной объект определяется с литералом объекта, переданным методу extend. Например, следующие функционально одинаковы:

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

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

Значения

в правой части пары ключ/значение в литерале объекта анализируются и выполняются немедленно. это означает, что селектор jQuery, используемый для el, будет проанализирован, как только вы его объявите, а не при создании экземпляра. Скорее всего, у вас есть ваш файл javascript, включенный в ваше приложение, и он загружается до загрузки DOM, поэтому селектор jquery не может найти элемент, к которому вы обращаетесь.

Есть много вещей, которые вы можете сделать, чтобы обойти это.

вы можете вызывать $(this.el) всякий раз, когда вам нужно использовать элемент
вы можете установить this.el в инициализаторе представления
вы можете установить {el: $("#whatever")} в качестве параметра конструктору вида, предполагая, что представление построено после загрузки DOM
вы можете использовать шаблон модуля javascript для отсрочки определения представлений и других магистральных объектов до тех пор, пока не будет загружена DOM.
и, возможно, несколько других опций, о которых я сейчас не думаю.

Ответ 2

Хорошо, что это не функция jQuery... Возможно, вы ищете пустую?

Комментарии к вашему коду:

В режиме просмотра видео:

не нужно назначать модель из параметров, это делается для вас
вам может потребоваться добавить результат шаблона (JST) в this.el, иначе ничего не появится...

В вашем представлении плейлиста:

в вашем рендере, в каждом цикле, измените $(that).el на $(that.el)
так как вы определяете el как jQuery, вам больше не нужно использовать $(this.el)

Ответ 3

использовать this.$el.clear(); и обновить файл jquery.js, например

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>

и сначала Bind Initialize, затем el: bind.