Javascript Backbone.View "el" 混淆
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5624929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone.View "el" confusion
提问by Manuel Meurer
How should a view's elbe handled?
It has to be set, otherwise events don't fire (see here).
应该如何el处理视图？必须设置它，否则不会触发事件（请参阅此处）。
But should it be an element that is already on the page?
In my app, I render a (jQuery Templates) template into a Fancybox. What should the elbe in that case?
但它应该是页面上已经存在的元素吗？在我的应用程序中，我将一个（jQuery 模板）模板渲染到一个 Fancybox 中。el在这种情况下应该是什么？
回答by LeRoy
A views el is where all the event binding takes place. You don't have to use it but if you want backbone to fire events you need to do your rendering work on the el. A views el is a DOM element but it does not have to be a pre-existing element. It will be created if you do not pull one from your current page, but you will have to insert it into the page if you ever want to see it do anything.
视图 el 是所有事件绑定发生的地方。您不必使用它，但如果您希望主干触发事件，您需要在 el 上进行渲染工作。视图 el 是一个 DOM 元素，但它不必是预先存在的元素。如果您不从当前页面中拉出一个，它将被创建，但如果您想看到它做任何事情，则必须将其插入页面。
An example: I have a view that creates individual items
一个例子：我有一个创建单个项目的视图
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);
}
});
The first view just creates the list items and the second view actually places them on the page. I think this is pretty similar to what happens in the ToDo exampleon the backbone.js site. I think convention is to render you content into the el. So the el serves as a landing place or a container for placing your templated content. Backbone then binds its events to the model data inside of it.
第一个视图只是创建列表项，第二个视图实际上将它们放在页面上。我认为这与backbone.js 站点上的ToDo 示例中发生的情况非常相似。我认为约定是将您的内容呈现到 el 中。因此 el 用作放置模板化内容的着陆点或容器。Backbone 然后将其事件绑定到其中的模型数据。
When you create a view you can manipulate the el in four ways using el:, tagName:, className:, and id:. If none of these are declared el defaults to a div without id or class. It is also not associated with the page at this point. You can change the tag to something else by using using tagName (e.g. tagName: "li", will give you an el of <li></li>). You can set the id and class of el likewise. Still el is not a part of your page. The el property allows you to do very fine grain manipulation of the el object. Most of the time I use an el: $("someElementInThePage")which actually binds all the manipulation you do to el in your view to the current page. Otherwise if you want to see all the hard work you have done in your view show up on the page you will need to insert/append it to the page somewhere else in your view (probably in render). I like to think of el as the container that all your view manipulates.
当你创建一个视图中可以使用操纵EL在四个方面el:，tagName:，className:，和id:。如果这些都没有被声明，el 默认为一个没有 id 或 class 的 div。此时它也与页面无关。您可以使用 tagName 将标签更改为其他内容（例如tagName: "li"，会给您一个 el <li></li>）。您可以同样设置 el 的 id 和 class。el 仍然不是您页面的一部分。el 属性允许您对 el 对象进行非常精细的操作。大多数时候我使用el: $("someElementInThePage")它实际上将您在视图中对 el 所做的所有操作绑定到当前页面。否则，如果您想看到您在视图中所做的所有艰苦工作都显示在页面上，您需要将其插入/附加到视图中其他位置的页面（可能在渲染中）。我喜欢将 el 视为所有视图操作的容器。
回答by Mark
Bit old now, but I was confused as well, and so for other people that get here, this fiddle might help - http://jsfiddle.net/hRndn/2/
现在有点老了，但我也很困惑，所以对于到达这里的其他人来说，这个小提琴可能会有所帮助 - http://jsfiddle.net/hRndn/2/
var MyView = Backbone.View.extend({
events: {
"click .btn" : "sayHello",
},
sayHello : function() {
alert("Hello");
},
render : function() {
this.$el.html("<input type='button' class='btn' value='Say Hello'></input>");
}
});
$(function() {
myView = new MyView({el:"#parent_id"});
myView.render();
});
回答by joshvermaire
You want your 'el' to reference an element that contains a child element that has any event that triggers a change in your view. Could be as wide as a "body" tag.
您希望“el”引用包含子元素的元素，该子元素具有触发视图更改的任何事件。可以和“body”标签一样宽。
