Backbone.View“el"困惑 [英] Backbone.View "el" confusion
问题描述
应该如何处理视图的el?必须设置它，否则不会触发事件(参见 此处).
How should a view's el be handled?
It has to be set, otherwise events don't fire (see here).
但它应该是页面上已经存在的元素吗?在我的应用程序中，我将一个(jQuery 模板)模板渲染到一个 Fancybox 中.在那种情况下 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 el be in that case?
推荐答案
视图 el 是所有事件绑定发生的地方.您不必使用它，但如果您希望主干触发事件，您需要在 el 上进行渲染工作.视图 el 是一个 DOM 元素，但它不必是预先存在的元素.如果您不从当前页面中拉出一个，它将被创建，但如果您想看到它做任何事情，则必须将其插入页面.
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.
一个例子:我有一个创建单个项目的视图
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);
}
});
第一个视图只是创建列表项，第二个视图实际上将它们放置在页面上.我认为这与backbone.js 站点上ToDo 示例 中发生的情况非常相似.我认为约定是将您的内容呈现到 el 中.因此 el 用作放置模板化内容的着陆点或容器.Backbone 然后将其事件绑定到其中的模型数据.
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 example on 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.
当您创建视图时，您可以使用 el:、tagName:、className: 和 以四种方式操作 el>id:.如果这些都没有被声明，el 默认为一个没有 id 或 class 的 div.此时它也与页面无关.您可以使用 tagName 将标签更改为其他内容(例如 tagName: "li"，会给你一个 el: $("someElementInThePage") 它实际上将您在视图中对 el 所做的所有操作绑定到当前页面.否则，如果您想看到您在视图中所做的所有艰苦工作显示在页面上，您将需要将其插入/附加到您视图中的其他位置(可能在渲染中).我喜欢将 el 视为您的所有视图操作的容器.
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.
这篇关于Backbone.View“el"困惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
