无法将html元素附加到骨干中的el.

Question

我似乎对下面的代码有问题.我的html中有一个id ='content'的div元素.我想用div元素替换el属性的'body'元素但是当我键入el:$('div')或el:$('div #content')或el:$时,我的hello world文本不会'#内容').我是backbone.js的初学者,在我的理解中,我相信这个el属性包含我们的父标记,其中所有模板都将作为子元素添加(在这种情况下,'body'标记为parent和'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文档:

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

或者如你所愿,

el:'div#content'

当视图初始化时,Backbone通过view.$el属性引用元素使其可用,该属性是一个缓存的jQuery对象.

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

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

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

如果需要使用现有DOM元素(而不是选择器)初始化Backbone视图,Backbone文档建议在初始化函数中传递它.