Backbone.js el 不工作

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

我总是低于错误

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

看来我的 PlayerListView 的 el 是空的。

我有 id 为 playlistWrapper 的 div。

如果我为 playlistWrapper 使用 jquery 选择器，它会提供适当的元素。

我究竟做错了什么。

Answer 1

我在这方面有点晚了，但问题是你在加载 DOM 之前指定了一个 jquery 选择器。

Backbone 对象是使用传入扩展方法的对象字面量定义的。例如，以下在功能上是相同的:

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

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

对象字面量中键/值对右侧的值会立即解析并执行。这意味着用于 el 的 jQuery 选择器将在您声明它时立即解析，而不是在实例化 View 时解析。很有可能，您的应用程序中包含了您的 javascript 文件，并且在加载 DOM 之前已下载该文件，因此 jquery 选择器无法找到您所指的元素。

你可以做很多事情来解决这个问题。

您可以调用$(this.el)每当您需要使用元素

您可以设置this.el在 View 初始化程序中

您可以设置{el: $("#whatever")}作为 View 构造函数的参数，假设 View 是在 DOM 加载后构造的

您可以使用 javascript 模块模式将 View 和其他主干对象的定义推迟到 DOM 加载后

可能还有一些我目前没有想到的其他选项