Javascript 主干模型保存问题

我一周前才开始研究主干，请不要介意这个问题是否愚蠢。好吧，这就是我要做的

我有一个名为Item的模型和一个名为Items的集合。有两个视图，一个用于添加项目，另一个用于列出项目。我遇到的问题是，当我试图保存项目时，它第一次被正确保存。下次添加新项时，该项将成功创建，但先前添加的项也将使用新项的属性进行更新。这会发生在所有要添加的连续项上

我猜集合中的所有模型都在更新，或者我需要有自己的保存方法。事实上，我无法找出我做错了什么。我只想用视图保存有问题的模型，而不是集合中的所有模型。如果你能给我指点，我会很感激的

链接到

项目添加/编辑视图 项目模型 物品收集

---

链接到（万一）

当您使用完表单后，要么提交表单，要么取消表单。您必须通过调用ItemView.remove（）或至少取消委托事件来销毁视图：

saveItem: function(e) {
  e.preventDefault()

  var item = {
    name: $('#itemName').val(),
    price: $('#itemPrice').val()
  }
  var self = this
  this.model.save(item, {
    success: function (model, response) {
      app.navigate('items/'+model.id, {trigger: true, replace: true})
    },
    error: function (model, response) {
      new Bootstrap.alert({ el: $('#page') }).render(response, 'error')
    }
  })
  this.remove(); // undelegate events for later views.
},

cancelItem: function (e) {
  if (this.model.isNew())
    app.navigate('items', {trigger: true, replace: true})
  else
    app.navigate('items/'+this.model.id, {trigger: true, replace: true});
  this.remove(); // undelegate events for later views.
} 

---

由于事件被委派到#页面，并且您的旧视图在创建新视图后仍然存在，因此在删除它们之前，它们的保存和取消方法仍将触发。

从您在此处列出的代码中不清楚您要在项目集合中添加新“项目”的位置。我建议您将模型逻辑移出视图并移入模型。如果由于视图中发生的事件而需要更新模型，那么只需从视图中调用模型上的一个方法，该方法将执行所需的逻辑。好的，我将尝试这样做。我之所以没有把完整的代码放进去，是因为它是模块化的，保存在不同的文件夹和文件中。这是指向想法的链接我不需要代码的链接，更需要一些方向，比如向items集合中添加新“items”的位置。我应该补充一点，您应该有1个ItemCollection，而不是每次需要时都重新创建它。将为您节省往返服务器的时间。另外，到目前为止看起来还不错！嘿，非常感谢你！这就解决了问题！像这样的事情通常是如何处理的？从DOM中删除视图在我使用

this.undelegateEvents（）时不会一直起作用

而不是

this.remove（）

define([
  'use!underscore',
  'use!backbone'
], function(_, Backbone) {
  var Item = Backbone.Model.extend({

    urlRoot: 'api/items',

    idAttribute: '_id'

  });

  return Item;
});

define([
  'jquery',
  'use!underscore',
  'use!backbone',
  'models/item'
], function($, _, Backbone, Item){
  var Items = Backbone.Collection.extend({

    model: Item,

    url: 'api/items/'

  });

  return Items;
});

saveItem: function(e) {
  e.preventDefault()

  var item = {
    name: $('#itemName').val(),
    price: $('#itemPrice').val()
  }
  var self = this
  this.model.save(item, {
    success: function (model, response) {
      app.navigate('items/'+model.id, {trigger: true, replace: true})
    },
    error: function (model, response) {
      new Bootstrap.alert({ el: $('#page') }).render(response, 'error')
    }
  })
  this.remove(); // undelegate events for later views.
},

cancelItem: function (e) {
  if (this.model.isNew())
    app.navigate('items', {trigger: true, replace: true})
  else
    app.navigate('items/'+this.model.id, {trigger: true, replace: true});
  this.remove(); // undelegate events for later views.
}