应该如何el
处理视图?必须设置它,否则不会触发事件(请参阅此处)。
但它应该是页面上已经存在的元素吗?在我的应用程序中,我将一个(jQuery 模板)模板渲染到一个 Fancybox 中。el
在那种情况下应该是什么?
应该如何el
处理视图?必须设置它,否则不会触发事件(请参阅此处)。
但它应该是页面上已经存在的元素吗?在我的应用程序中,我将一个(jQuery 模板)模板渲染到一个 Fancybox 中。el
在那种情况下应该是什么?
视图 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);
}
});
第一个视图只是创建列表项,第二个视图实际上将它们放在页面上。我认为这与backbone.js 站点上的ToDo 示例中发生的情况非常相似。我认为约定是将您的内容呈现到 el 中。因此 el 用作放置模板化内容的着陆点或容器。Backbone 然后将其事件绑定到其中的模型数据。
当你创建一个视图中可以使用操纵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 视为所有视图操作的容器。
现在有点老了,但我也很困惑,所以对于到达这里的其他人来说,这个小提琴可能会有所帮助 - 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();
});
您希望“el”引用包含子元素的元素,该子元素具有触发视图更改的任何事件。可以和“body”标签一样宽。