Question

我已按如下方式定义了一个视图：

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中。

相反，如果我这样做（在render()方法中）：

$(".bookContainer").html("Hello World");

它工作正常。为什么this.$el没有引用$(".bookContainer")？

注意：如果我记录this.$el，我会得到以下对象：

[div.bookContainer, context: div.bookContainer]

Answer 1

您误解了tagName和className的工作原理。来自fine manual：

el view.el
  [...]
  this.el可以从DOM选择器字符串或Element中解析出来;否则，它将从视图的tagName，className，id和attributes属性中创建。

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

el: '.bookContainer'

Answer 2

您需要在页面中插入bookView。

当您致电bookView = new app.BookView({});时，您的Backbone.View实例包含的html：

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

但是，此元素尚未插入DOM。你仍然需要这样做。举个例子：

bookView = new app.BookView({});

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

对el的引用是Backbone.View的元素，可以找到相关文档here

骨干查看：$ el未按预期工作

2 个答案: