Javascript Backbone.js应用程序偶尔触发请求——即当只应触发一个请求时，没有请求或多个请求

我对Backbone.js比较陌生，但我认为直到现在我已经掌握了窍门。我有一个基本的联系人管理应用程序，但每当我点击submit按钮创建新联系人时，它有时根本不发送

POST

请求，但有时Backbone.js发送两个或更多

POST

请求，而我只想发送一个。当我试图通过发送

delete

请求来删除联系人时，也会出现类似的情况。这是我的堆栈：

前端：
JQuery
下划线
主干网
要求

后端：
节点
快车
猫鼬和猫鼬

我认为这是一个主干/前端问题，因为在阅读Chrome开发者工具网络菜单发送的请求时，我看到了多个请求。下面是我认为我的应用程序中的相关代码。如果你想看到更多，只要请求。我对这个问题很困惑，只能希望外面的人不会。谢谢

editContact.js:（查看）

editContactTemplate.html:（模板）

路由器.js（路由器）

---

您在哪里实例化EditContactView？您是否可能正在使用相同的“el”实例化多个视图（这将解释多个视图）？至于缺少的请求，您是否有时在没有模型的情况下实例化EditContactView

---

如果没有更多的信息，很难准确地猜测可能是什么错误，但这里有一个简单的调试想法：在模型上定义一个“fetch”方法，添加一个

调试器行，然后调用主干获取（
Backbone.Model.prototype.fetch.apply（这是参数）；
）。通过这种方式，您可以使用Firebug/Chrome dev tools/等工具在每次获取模型时暂停并检查内容。
此处：我将在尝试您的调试建议时发布路由器代码。你能更详细地解释一下你的意思吗？我理解添加
调试器行到fetch方法中的模型，但是我应该把
主干.model.fetch.apply放在哪里（这是参数），它到底做什么？你可以把它放在调试器行后面，它所做的基本上是其他语言中的
super（）
；换句话说，它调用父对象（在本例中为模型）的fetch方法，但将“this”（模型的子类）作为“this”。通过组合这两行代码，可以保留通常从Backbone.Model继承的所有获取功能，但仍然可以插入调试器行。（作为旁注，这实际上是一个非常有用的模式，可以通过主干学习，因为它允许您的子类在重写它们时调用其父类的方法。例如，可能您的类a从类B扩展而来，而类B有一个initialize函数。您希望a有自己的initialize，但也希望保持B的initialize；justdo:
B.initialize.apply（这个，参数）；
在A的initialize中，您已经设置好了。）好的：这是我使用的代码：
var ContactModel=Backbone.Model.extend（{urlRoot:'/contacts'fetch:function（）{debugger；Backbone.Model.fetch.apply（这个）；}）；
但它给了我一个
未捕获的语法错误：意外的标识符
错误…如果我在这方面是一个彻头彻尾的傻瓜，那就很抱歉了。噢，天哪，我真的很抱歉，我把模式搞砸了，忘记了
.prototype
。应该是这样的。
主干。模型。原型。获取。应用（这个）
…抱歉造成混乱（我希望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;

});

<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>

define([
  'jquery',
  'underscore',
  'backbone'
], function($, _, Backbone){

  var ContactModel = Backbone.Model.extend({
    urlRoot: '/contacts'
  });

  return ContactModel;
});

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
  };
});