Backbone.js的 - 难道这按钮和事件正确绑定？ [英] Backbone.js - Is this button and event bound correctly?
问题描述
我与Backbone.js的创建一个表视图，和一个单独的行观点，并试图将该行添加到表试验：
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:
我有：
- 系统接触模型
- 系统收集联系人
- 系统联系人视图（充当
主视图） - 系统ContactRow视图
到目前为止，该项目工作正常 - 除了是应该触发，增加了该行的功能按钮
So far, the project is working fine - except for a button that is supposed to trigger the function that adds the row.
下面是我的code迄今：
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);
正如你所看到的，我有一个的addContact 被拴在渲染过程中正在被追加到主页上的div元素中的添加联系人按钮的点击事件函数
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.
这是一天的结束，我的大脑是炸，所以我倒是AP preciate对此有何指针。谢谢你。
It's the end of the day and my brain is fried so I'd appreciate any pointers on this. Thanks.
推荐答案
下面是一个工作的例子。我更新了code。与最佳实践使用骨干。
Here's a working example. I updated the code with best practices for using Backbone.
请注意，我没有通过骨干视图中添加的按钮。按钮是HTML身体的一部分，我只是订阅其click事件，然后将联系人添加到联系人集合。
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.
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js'></script>
<script type='text/javascript'>
$(function() {
//initialize the contacts collection and add some contacts
contacts = new Contacts();
contacts.add(new Contact());
contacts.add(new Contact());
//only need to render the ContactsView once
var view = new ContactsView({ collection: contacts });
$("body").append(view.render().el);
//adding a contact to the contacts list when the
//button is clicked
$("#add-contact").click(function() {
contacts.add(new Contact());
});
});
Contact = Backbone.Model.extend({
defaults: {
first_name: "John",
last_name: "Smith",
address: "123 Main St"
}
});
Contacts = Backbone.Collection.extend({
model: Contact
});
ContactRow = Backbone.View.extend({
initialize: function() {
_.bindAll(this, "render");
this.template = _.template($("#contact-row").html());
},
//every backbone view has a tagName. the default tagName is 'div'
//we're changing it to a table row
tagName: 'tr',
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
ContactsView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, "render");
this.headerTemplate = $("#contacts-table-header").html();
this.collection.bind("add", this.renderContact, this);
},
//the ContactsView element will be a table
tagName: 'table',
render: function() {
$(this.el).html(this.headerTemplate);
this.collection.each(function(contact) {
this.renderContact(contact);
}, this);
return this;
},
renderContact: function(contact) {
var contactView = new ContactRow({ model: contact });
$(this.el).append(contactView.render().el);
}
});
</script>
<script type='text/template' id='contact-row'>
<td><%= first_name %></td>
<td><%= last_name %></td>
<td><%= address %></td>
</script>
<script type='text/template' id='contacts-table-header'>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</thead>
</script>
</head>
<body>
<button id="add-contact">Add Contact</button>
</body>
</html>
这篇关于Backbone.js的 - 难道这按钮和事件正确绑定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
