Question

我对Backbone.js比较陌生，但我认为直到现在我才掌握它。我有一个基本的联系人管理应用程序，但每当我单击提交按钮创建新联系人时，它有时根本不发送POST请求，但有时Backbone.js发送两个或更多POST {{}} 1}}当我打算发送一个请求时。当我尝试通过发送DELETE请求删除联系人时，会出现类似的情况。这是我的堆栈：

前端
JQuery的
强调
骨干
需要

返回-结束：
节点
快速
Mongodb和Mongoose

我认为这是一个Backbone / Front-End问题，因为在阅读Chrome Developer Tools网络菜单发送的请求时，我看到了多个请求。以下是我认为是我的应用程序中的相关代码。如果您想了解更多信息，请提出要求。我对这个问题感到非常困惑，只能希望那里的人没有。谢谢！

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

Answer 1

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

如果没有更多信息，很难准确猜出可能出现的问题，但这是一个简单的调试思路：在模型上定义“fetch”方法，向其添加debugger;行，然后调用Backbone fetch（ Backbone.Model.prototype.fetch.apply(this, arguments);）。这样您就可以使用Firebug / Chrome开发工具/等。每次模型取出时暂停和检查事物。

Backbone.js App偶尔发送请求 - 即。只有一个人应该被解雇时没有请求或多个请求

1 个答案: