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

Question

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

(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'

当 View 初始化时，Backbone 引用元素使其通过 view.$el 属性可用，这是一个缓存的 jQuery 对象。

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

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

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

如果您需要使用现有的 DOM 元素(而不是选择器)初始化 Backbone View ，Backbone 文档建议将其传递到 initialize 中。功能。