Javascript 主干视图：$el未按预期工作

我定义了一个视图，如下所示：

var BookView = Backbone.View.extend({
    tagName: "div",
    className: "bookContainer",

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

    render: function() {
        this.$el.html("Hello World"); // Problem is here
        return this;
    }
});

var bookView = new app.BookView({});

问题是，

Hello World

没有添加到指定的

div

，我使用

this.$el

引用该div

相反，如果我这样做（在

render（）

方法中）：

它很好用。为什么

这个.$el

没有引用

$（“.bookContainer”）

注意：如果我记录此。$el，我将得到以下对象：

[div.bookContainer, context: div.bookContainer]

---

您需要在页面中插入

bookView

当您调用

bookView=newapp.bookView（{}）时

您有一个

主干的实例。视图

包含以下html：

<div class="bookContainer">
  Hello World
</div>

---

对

el

的引用是

主干的元素。查看
，可以找到相关文档您误解了
标记名和
类名的工作原理。从：

el
view.el


[…]

this.el
可以从DOM选择器字符串或元素解析；否则，它将从视图的
标记名
、
类名
、
id
和
属性
属性创建

因此，
标记名
和
类名
属性用于创建
el
，而不是在DOM中找到它。如果要将视图绑定到现有图元，请使用
el
：

el: '.bookContainer'

对不起，我忘了在我的帖子中添加这个，但是我的html中已经有了这个@akshayKhot，当我读到mu的答案时，我意识到他已经得到了你想要的答案。谢谢，我没有意识到这一点。从my index.html中删除原始的
div.bookContainer
后，它现在可以工作了。谢谢
bookView = new app.BookView({});

// put the bookview element into the dom
$('body').html(bookView.el);

el: '.bookContainer'