Backbone.js视图中究竟是什么this.el？

Question

I'm confused about the meaning of el in Backbone views. Some tutorials (such as this one ) make it seem like el is the parent of the view being created, where the render method is supposed to append the view to its el . Others (like this ) treat it like it's the element of the view itself. Is there a best practice concerning this?

Answer 1

el is definitely the element the view corresponds to, not its parent. In your first example, they considering the whole page body to be the view, and then upon rendering, they insert the components that compose it. I suppose this might be appropriate for top-level views representing entire pages. Backbone gives you a lot of flexibility (ie rope to hang yourself with), so you can do things in many ways. Generally speaking, however you do it, it works best if you actually construct and append the components of your view before attaching it to the DOM wheverer possible. This is mentioned in your second example, and in the Backbone docs themselves:

All views have a DOM element at all times (the el property), whether they've already been inserted into the page or not. In this fashion, views can be rendered at any time, and inserted into the DOM all at once, in order to get high-performance UI rendering with as few reflows and repaints as possible.

Projects like Marionette implement a lot of Backbone best practices and let you operate at a higher level of abstraction. I highly recommend checking it out, instead of trying to figure out all the best-practice patterns yourself.

Answer 2

It's kinda both... el represents the dom element which your view will be rendered into. The template for your view probably has multiple top-level elements. To simplify things, when backbone renders a view, it uses a "parent" element to wrap the contents of your template. By default this element is a div (set tagName to override this and/or set className to set css classes on it) and is what el refers to.