Backbone.js el 不工作

发布于 2024-10-30 03:39:53 字数 1172 浏览 1 评论 0 原文

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

我有一个带有 id playlistWrapper 的 div。

如果我对 playlistWrapper 使用 jquery 选择器，它会给出正确的元素。

我做错了什么。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回眸一笑 2024-11-06 03:39:53

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

主干对象是使用传递给扩展方法的对象文字来定义的。例如，以下内容在功能上是相同的：

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 之后已加载
，可能还有一些我目前没有想到的其他选项

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