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是空的.

我有div与id playlistWrapper.

如果我使用jquery选择器播放playlistWrapper它给出了适当的元素.

我究竟做错了什么.

Answer 1

我在这方面迟到了,但问题是你在加载DOM之前指定了一个jquery选择器.

骨干对象定义为传递给extend方法的对象文字.例如,以下功能相同:

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

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

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

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

• 您可以$(this.el)在需要使用元素时调用
• 您可以this.el在视图初始化程序中进行设置
• 您可以设置{el: $("#whatever")}为视图构造函数的参数,假设视图是在DOM加载后构造的
• 您可以使用javascript模块模式来推迟视图和其他主干对象的定义,直到加载DOM之后
• 可能还有一些我目前没想到的其他选择