我对 Backbone.js 比较陌生，但我认为直到现在我已经掌握了它。我有一个基本的联系人管理应用程序，但是每当我单击提交按钮以创建新联系人时，它有时根本不会发送POST请求，但有时 Backbone.js 会发送两个或更多POST请求，而我只是打算发送一。当我尝试通过发送DELETE请求来删除联系人时，也会发生类似的情况。这是我的堆栈：
前端：
JQuery
Underscore
Backbone
Require
后端：
Node
Express
Mongodb 和 Mongoose
我认为这是一个主干/前端问题，因为在阅读使用 Chrome 开发人员工具网络菜单发送的请求时，我看到那里有多个请求。以下是我认为是我的应用程序中的相关代码。如果你想看到更多，只是请求。我对这个问题感到很困惑，只能希望外面有人没有。谢谢！
editContact.js：（查看）
define([
'jquery',
'underscore',
'backbone',
'text!templates/editcontact.html',
'models/contact'
], function($, _, Backbone, editContactTemplate, Contact){
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
var EditContactView = Backbone.View.extend({
el: '.contactview',
render: function (options) {
var that = this;
if (options.id) {
that.contact = new Contact({id: options.id});
that.contact.fetch({
success: function (contact) {
var template = _.template(editContactTemplate, {contact: contact});
that.$el.html(template);
}
});
} else {
var template = _.template(editContactTemplate, {contact: null});
this.$el.html(template);
}
},
events: {
'submit .edit-contact-form': 'saveContact',
'click .delete': 'deleteContact'
},
saveContact: function (ev) {
var contactDetails = $(ev.currentTarget).serializeObject();
var contact = new Contact();
contact.save(contactDetails, {
success: function (contact) {
Backbone.history.navigate('contacts/' + contact.id, {trigger: true});
}
});
return false;
},
deleteContact: function (ev) {
this.contact.destroy({
success: function () {
$('.contactview').html('');
Backbone.history.navigate('', {trigger: true});
}
});
return false;
}
});
return EditContactView;
});
editContactTemplate.html：（模板）
<form class="edit-contact-form">
<legend><%= contact ? 'Edit' : 'Create' %> Contact</legend>
<label>First Name</label>
<input type="text" name="firstname" value="<%= contact ? contact.get('firstname') : '' %>">
<label>Last Name</label>
<input type="text" name="lastname" value="<%= contact ? contact.get('lastname') : '' %>">
<label>Email</label>
<input type="text" name="email" value="<%= contact ? contact.get('email') : '' %>">
<label>Phone Number</label>
<input type="text" name="phonenumber" value="<%= contact ? contact.get('phonenumber') : '' %>">
<hr>
<button type="submit" class="btn"><%= contact ? 'Save' : 'Create' %></button>
<% if (contact) { %>
<input type="hidden" name="id" value="<%= contact.id %>">
<button type="button" class="btn btn-danger delete">Delete</button>
<% }; %>
</form>
Contact.js：（模型）
define([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone){
var ContactModel = Backbone.Model.extend({
urlRoot: '/contacts'
});
return ContactModel;
});
Router.js（路由器）
define([
'jquery',
'underscore',
'backbone',
'views/allcontacts',
'views/editcontact',
'views/contact'
], function($, _, Backbone, AllContactsView, EditContactView, ContactView){
var AppRouter = Backbone.Router.extend({
routes: {
'': 'contacts',
'newcontact': 'editContact',
'edit/:id': 'editContact',
'contacts/:id': 'viewContact'
}
});
var initialize = function () {
var router = new AppRouter();
router.on('route:contacts', function() {
var allContactsView = new AllContactsView();
allContactsView.render();
});
router.on('route:editContact', function(id) {
var allContactsView = new AllContactsView();
allContactsView.render();
var editContactView = new EditContactView();
editContactView.render({id: id});
});
router.on('route:viewContact', function(id) {
var allContactsView = new AllContactsView();
allContactsView.render();
var contactView = new ContactView();
contactView.render({id: id});
});
Backbone.history.start();
};
return {
initialize: initialize
};
});