视图 el 是所有事件绑定发生的地方。您不必使用它，但如果您希望主干触发事件，您需要在 el 上进行渲染工作。视图 el 是一个 DOM 元素，但它不必是预先存在的元素。如果您不从当前页面中提取一个，它将被创建，但如果您想看到它执行任何操作，则必须将其插入页面中。
一个例子：
我有一个创建单独项目的视图
window.ItemView = Backbone.View.extend({
tagName: "li", //this defaults to div if you don't declare it.
template: _.template("<p><%= someModelKey %></p>"),
events: {
//this event will be attached to the model elements in
//the el of every view inserted by AppView below
"click": "someFunctionThatDoesSomething"
},
initialize: function () {
_.bindAll(this, "render");
this.render();
},
render: function () {
this.el.innerHTML = this.template(this.model.toJSON());
return this;
}
});
window.AppView = Backbone.View.extend({
el: $("#someElementID"), //Here we actually grab a pre-existing element
initialize: function () {
_.bindAll(this, "render");
this.render(new myModel());
},
render: function (item) {
var view = new ItemView({ model: item });
this.el.append(view.render().el);
}
});
第一个视图仅创建列表项，第二个视图实际上将它们放置在页面上。我认为这与发生在待办事项示例 http://documentcloud.github.com/backbone/docs/todos.html在backbone.js 网站上。我认为约定是将您的内容呈现到 el 中。因此，el 可以作为放置模板内容的着陆点或容器。然后，Backbone 将其事件绑定到其内部的模型数据。
创建视图时，您可以使用四种方式操作 elel:, tagName:, className:, and id:。如果这些都没有声明，el 默认为没有 id 或 class 的 div。此时它也未与该页面关联。您可以使用 tagName 将标签更改为其他内容（例如tagName: "li"，会给你一个 el<li></li>）。同样可以设置el的id和class。 el 仍然不是您页面的一部分。 el 属性允许您对 el 对象进行非常精细的操作。大多数时候我使用el: $("someElementInThePage")它实际上将您在视图中对 el 所做的所有操作绑定到当前页面。否则，如果您想看到在视图中完成的所有艰苦工作都显示在页面上，则需要将其插入/附加到页面视图中的其他位置（可能在渲染中）。我喜欢将 el 视为所有视图都可以操作的容器。
