jQuery Backbone JS 查看事件没有触发?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5826309/
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 JS View Events not Firing?
提问by aherrick
I'm trying to play around with Backbone JS and so far everything seems to be making sense and working smoothly.
我正在尝试使用 Backbone JS,到目前为止一切似乎都有意义并且工作顺利。
However with the code below, my custom events do not seem to be firing. Anything in the below code stand out as to why that might be? Do I need to "initialize" anything in the View? Any other pointers on the code/structure would be cool as well. Below is my full JS/HTML.
但是,使用下面的代码,我的自定义事件似乎没有触发。以下代码中的任何内容都可以说明为什么会这样?我需要在视图中“初始化”任何东西吗?代码/结构上的任何其他指针也很酷。下面是我完整的 JS/HTML。
JS
JS
var Todo = Backbone.Model.extend({});
var TodoCollection = Backbone.Collection.extend({
model: Todo,
url: '/Home/Todos'
});
var AppView = Backbone.View.extend({
// where it should listen, required?
el: $(".content"),
events: {
"keypress #new-todo": "enter"
},
initialize: function () {
// _.bindAll(this, "render", "createOnEnter");
// this.collection.bind("all", this.render);
},
hi: function () {
alert('ohai');
},
render: function () {
var lis = '';
$.each(this.collection.models, function () {
lis += '<li>' + this.get('Text') + '</li>';
});
$('#todo-list').append(lis);
return this.el;
},
enter: function (e) {
alert('hi');
}
});
var TodoController = Backbone.Controller.extend({
routes: {
"": "todos"
},
initialize: function (options) { },
todos: function () {
var todolist = new TodoCollection();
todolist.fetch({
success: function (data) {
var appview = new AppView({ collection: data });
appview.render();
}
});
}
});
$(function () {
window.app = new TodoController();
Backbone.history.start();
});
HTML
HTML
<div id="todoapp">
<div class="content">
<input id="new-todo" placeholder="What needs to be done?" type="text" />
<div id="todos">
<ul id="todo-list">
</ul>
</div>
<a href="#">say hey</a>
</div>
</div>
回答by Julien
el: $(".content")
Try this:
尝试这个:
var appview = new AppView({ el:$(".content"), collection: data });
You cannot call a jQuery there because the DOM is not yet created. You must do it when the view is loaded either as my example or in the initialize.
您不能在那里调用 jQuery,因为 DOM 尚未创建。当视图作为我的示例或在初始化中加载时,您必须执行此操作。
回答by Jess Jacobs
Additionally, for your events to work, you must bind your content in the render function to this.el. Events are all bound to the element you specify, so it follows that you need to have your event-generating elements bound as children to the element which acts as the delegator.
此外,要使事件起作用,您必须将渲染函数中的内容绑定到 this.el。事件都绑定到您指定的元素,因此您需要将事件生成元素作为子元素绑定到充当委托者的元素。
回答by user2032300
The approved answer has a drawback. You can not be very dynamic if you set { el: $(".content") }. It is not possible to reuse ".content"-Element inside your DOM. As soon as you call remove() on this view $(".content") will be gone too.
批准的答案有一个缺点。如果你设置 { el: $(".content") },你就不会很动态。无法在 DOM 中重用“.content”-Element。一旦你在这个视图上调用 remove() , $(".content") 也会消失。
I use another parameter to pass that information:
我使用另一个参数来传递该信息:
{ renderTarget: $("#content") }.
and insert my view into the DOM at start of render:
并在渲染开始时将我的视图插入到 DOM 中:
initialize: function (options) {
options = options || {};
this.renderTarget = options.renderTarget || this.renderTarget;
},
render: function () {
if (this.renderTarget) {
$(this.renderTarget).html(this.el);
}
... render stuff into $(this.el) ...
return this;
}