无法将 html 元素附加到主干中的 el。

Question

我似乎对下面的代码有问题。我的 html 中有一个 id='content' 的 div 元素。我想用 div 元素替换 el 属性的 'body' 元素，但是当我输入 el: $('div') 或 el:$('div#content') 或 el: $( '＃内容'）。我是backbone.js的初学者，据我了解，我相信这个el属性包含我们的父标签，我们所有的模板都将作为子元素添加（在这种情况下，'body'标签是父标签，'p'标签是孩子）。

(function($){
    var ListView = Backbone.View.extend({
    el: $('body'),      

    initialize: function(){
        this.render();
    },

    render: function(){
        (this.el).append("<p>Hello World</p>");
    }
});

var listView = new ListView();
})(jQuery);

Answer 1

View.el 属性应定义为 jQuery 选择器（字符串），而不是对 HTML 元素的引用。

来自Backbone documentation：

var BodyView = Backbone.View.extend({
  el: 'body'
});

或者如你所愿，

el:'div#content'

当视图初始化时，Backbone 引用其中的元素，使其通过 view.$elproperty 可用，这是一个缓存的 jQuery 对象。

this.$el.append("<p>Hello World</p>");

您发布的示例代码有效，因为始终只有一个bodyelement，并且在呈现您的视图时该元素已经存在于DOM中。因此，当您声明 el:$('body') 时，您会获得对 body 元素的引用。 renderin 中的代码有效，因为 this.el 现在是对 jQuery 对象的直接引用：

(this.el).append("<p>Hello World</p>");

如果您需要使用现有 DOM 元素（而不是选择器）初始化 Backbone 视图，Backbone 文档建议将其传递给 initialize 函数。