Backbone.js - 此按钮和事件绑定正确吗？
我正在尝试使用 Backbone.js，创建一个表视图和一个单独的行视图，并尝试将行添加到表中：
我有：
- 联系人模型
- 联系人集合
- 联系人视图（充当 主视图）
- ContactRow 视图
到目前为止，该项目运行良好 - 除了一个应该触发添加行的功能的按钮。
到目前为止，这是我的代码：
$(function($) {
window.Contact = Backbone.Model.extend({
defaults: {
first_name: "John",
last_name: "Smith",
address: "123 Main St"
}
});
window.Contacts = Backbone.Collection.extend({
model: Contact
});
window.ContactRow = Backbone.View.extend({
//el: $("#contacts-table table tbody"),
row_template: _.template($("#contact-row").html()),
initialize: function() {
_.bindAll(this, "render")
},
render: function() {
$("tbody").html("<tr><td>Look at me, I'm a row!</td></tr>");
return this;
}
});
window.ContactsView = Backbone.View.extend({
el: $("#contacts-container"),
events: {
"click button#add_contact": "addContact"
},
template: _.template($("#contacts-table").html()),
initialize: function() {
_.bindAll(this, "render", "addContact", "appendContact");
this.collection = new Contacts();
this.collection.bind("add", this.appendContact);
var contactRow = new ContactRow();
this.render();
this.appendContact(); // Just a test to see if the function is working
},
render: function() {
$("#button-container").append("<button id='add_contact'>Add Contact</button>");
$(this.el).html(this.template);
_(this.collection.models).each(function(contact) {
appendContact(contact);
}, this)
},
addContact: function() {
console.log("yup, it works!"); // well, not yet
var contact = new Contact();
this.collection.add(contact);
},
appendContact: function(contact) {
var contactRow = new ContactRow({
model: contact
});
$("body").append(contactRow.render().el);
}
});
var contactsView = new ContactsView();
}, jQuery);
如您所见，我有一个 addContact 函数，该函数与附加到主页上 div 元素的“添加联系人”按钮的单击事件相关联在渲染过程中。
我正在尝试将日志消息写入控制台，但按钮似乎没有触发该方法，我不明白为什么。
今天结束了，我的大脑很疲惫，所以我很感激任何关于这方面的指示。谢谢。
I'm experimenting with Backbone.js by creating a table view, and a seperate row view and trying to add the row to the table:
I have:
- A Contact model
- A Contacts collection
- A Contacts view (acts as the
main view) - A ContactRow view
So far, the project is working fine - except for a button that is supposed to trigger the function that adds the row.
Here is my code so far:
$(function($) {
window.Contact = Backbone.Model.extend({
defaults: {
first_name: "John",
last_name: "Smith",
address: "123 Main St"
}
});
window.Contacts = Backbone.Collection.extend({
model: Contact
});
window.ContactRow = Backbone.View.extend({
//el: $("#contacts-table table tbody"),
row_template: _.template($("#contact-row").html()),
initialize: function() {
_.bindAll(this, "render")
},
render: function() {
$("tbody").html("<tr><td>Look at me, I'm a row!</td></tr>");
return this;
}
});
window.ContactsView = Backbone.View.extend({
el: $("#contacts-container"),
events: {
"click button#add_contact": "addContact"
},
template: _.template($("#contacts-table").html()),
initialize: function() {
_.bindAll(this, "render", "addContact", "appendContact");
this.collection = new Contacts();
this.collection.bind("add", this.appendContact);
var contactRow = new ContactRow();
this.render();
this.appendContact(); // Just a test to see if the function is working
},
render: function() {
$("#button-container").append("<button id='add_contact'>Add Contact</button>");
$(this.el).html(this.template);
_(this.collection.models).each(function(contact) {
appendContact(contact);
}, this)
},
addContact: function() {
console.log("yup, it works!"); // well, not yet
var contact = new Contact();
this.collection.add(contact);
},
appendContact: function(contact) {
var contactRow = new ContactRow({
model: contact
});
$("body").append(contactRow.render().el);
}
});
var contactsView = new ContactsView();
}, jQuery);
As you can see, I have an addContact function that is tied to the click event of the "Add Contact" button that is being appended to a div element on the main page during the render process.
I'm attempting to write log messages to the console, but the button doesn't seem to be firing off the method and I can't figure out why.
It's the end of the day and my brain is fried so I'd appreciate any pointers on this. Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这是一个工作示例。我用使用 Backbone 的最佳实践更新了代码。
请注意，我没有通过 Backbone 视图添加按钮。该按钮是html正文的一部分，我只是订阅它的点击事件，然后将联系人添加到联系人集合中。
Here's a working example. I updated the code with best practices for using Backbone.
Notice I didn't add the button through a Backbone view. The button is part of the html body, and I just subscribe to its click event and then add a contact to the contacts collection.
这是因为您在在主干遍历您的事件集合之后追加
当您创建主干视图 delegateEvents 时，会在幕后调用。这是主干查看事件哈希并将所有内容连接起来的地方。要修复以下任一问题：
在创建视图之前附加
或在渲染后手动调用主干的
delegateEvents所以你的渲染函数可能看起来像：
更新：
你必须手动调用
delegateEvents这似乎很奇怪。也可能是#button-contianer不是视图的el的子级。该事件哈希中的所有选择器的范围都为el，因此，如果#button-contianer不是它的子级，则button#add_contact> 选择器永远不会找到任何东西。作为概念证明，请尝试以下操作：在渲染方法中：This is because you're appending
<button id='contact'>after backbone has traversed your event collection.When you create a backbone view delegateEvents is called behind the scenes. This is where backbone looks at your events hash and wires everything up. To fix Either:
append
<button id='contact'>before creating the viewor
or manually call backbone's
delegateEventsafter renderingSo your render function may look like:
Update:
It seems odd that you'd have to manually call
delegateEvents. It could also be that#button-contianerisn't a child of the view'sel. All of the selectors in that event hash are scoped toel, so if#button-contianerisn't a child of it thebutton#add_contactselector will never find anything. As a proof of concept, try this: in your render method:此代码不起作用，因为您没有名为
appendContact的变量。应该是：This code won't work, because you don't have a variable named
appendContact. Should be: