Backbone.js的EL不工作 [英] Backbone.js el is not working

问题描述

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

看来我PlayerListView的EL是空的。

it seems my el of PlayerListView is empty.

我的DIV ID playlistWrapper。

i have div with id playlistWrapper.

如果使用jQuery选择器playlistWrapper它给适当的元素。

if i use jquery selector for playlistWrapper it gives proper element.

什么我做错了。

推荐答案

我有点晚，这个党，但问题是，你指定DOM加载之前jQuery选择。

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

在一个对象字面键/值对的右侧

值解析并立即执行。这意味着用于 EL jQuery选择将尽快为您声明它解析，而不是当视图实例化。机会是，你必须包含在你的应用程序的JavaScript文件和它的DOM之前加载下载，所以jQuery选择找不到你所指的元素。

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.

• 您可以致电 $（this.el）当您需要使用元素


• 您可以设置 this.el 视图初始化


• 您可以设置 {EL：$（无论＃）} 作为参数传递给该视图的构造，假设DOM后构建的观点已经加载


• 您可以使用JavaScript模块模式推迟的意见和其他骨干对象的定义，直到加载DOM后


• 和大概的，我不是在此刻考虑其他的选择屈指可数

• 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

这篇关于Backbone.js的EL不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！