Backbone js Model保存多次

我学习了Backbone js，所以我开始创建示例应用程序。

顺便说一句，我现在面临一个问题，即模型在我的数据库中保存了不止一次。 我的意思是当你点击“ 创建用户 ”时，你会看到一个表单，所以当我点击“创建用户”按钮时，我的数据库中的详细信息会被多次保存，因此主页中会显示所有重复的用户信息。

实际上我试图练习这个video： https://www.youtube.com/watch?v=FZSjvWtUxYk ： https://www.youtube.com/watch?v=FZSjvWtUxYk

输出看起来像这样： http://backbonetutorials.com/videos/beginner/#/new ： http://backbonetutorials.com/videos/beginner/#/new

这是我的代码：

     /*$.getJSON('api/users/1',function(data){ console.log(data); });*/    
 
 User Manager
 
 
 
  New User 
 
 
 
 
First Name
 
Last Name
 
Age
 
 
 
  
 
 
 
 
  
 
   
Create User
 
 First Name 
 Last Name 
 Age 
  
      var UsersList = Backbone.Collection.extend({ url: 'api/users' }); var User = Backbone.Model.extend({ urlRoot: 'api/users' }); var UsersListView = Backbone.View.extend({ el: '.page', render: function(){ var that = this; var users = new UsersList(); users.fetch({ success: function(usersList){ var template = _.template($('#user-list-template').html())({users: usersList.models}); that.$el.html(template); } }); } }); var AddUserView = Backbone.View.extend({ el: '.page', render: function(){ var template = _.template($('#add-user-template').html())({user:null}); this.$el.html(template); }, events: { 'submit .add-user-form': 'saveOrUpdateUser' }, saveOrUpdateUser: function(e){ e.preventDefault(); var userDetails = {firstName: $('#firstName').val(), lastName: $('#lastName').val(), age: $('#age').val()}; var user = new User(); user.save(userDetails,{ //SEEMS LIKE HERE HAVING SOME PROBLEM success: function(){ console.log('INSIDE SUCCESS..'); router.navigate('',{trigger: 'true'}); } }); } }); var Router = Backbone.Router.extend({ routes:{ '':'home', 'new':'addUser' } }); var router = new Router(); router.on('route:home',function(){ var usersListView = new UsersListView(); usersListView.render(); }); router.on('route:addUser',function(){ var addUserView = new AddUserView(); addUserView.render(); }); Backbone.history.start();    

请告诉我出了什么问题以及如何解决这个问题？

Answer 1

@MarciaYudkin您会注意到，当您第一次加载站点并创建用户时，第一个用户不会保存重复项。 但是，下次填写CreateUser表单时，用户将被保存两次。 这里发生的是你正在遭受僵尸观点的痛苦！ （啊！）

Zombie View是一个你认为已经消失的视图，但实际上仍然在后台。 由于他们还活着，他们仍然受到其观点的束缚。 您在代码中检测到的僵尸视图是：

 router.on('route:addUser',function(){ var addUserView = new AddUserView(); // <---Right here! addUserView.render(); }); 

每次用户跟踪route:addUser路由最终会创建一个新的AddUserView 。 该视图呈现自身并将其自身附加到DOM。 您会认为，既然您从DOM中“删除”了旧视图，它就会消失，对吧？ 嗯，它确实 - 来自DOM ---但不是来自内存！ 由于该视图仍然具有绑定到DOM的事件，因此它不会获得垃圾回收。 当触发绑定到任何先前视图的DOM元素时（例如通过单击它），当前以及所有旧的，未处置的视图仍然绑定到它，并且所有视图都响应触发器。 这就是发生在你身上的事。 在这里，看到我煮熟的小提琴 。

如何解决它

解决这个问题的方法是保持对周围视图的引用，以便您可以正确处理它。 因此，例如，您可以在路由器中附加对视图的引用，并且，

 router.on('route:addUser',function(){ // If the view exists, remove it if (router.addUserView) { router.addUserView.remove(); router.addUserView.off(); } router.addUserView = new AddUserView(); router.addUserView.render(); }); 

在这里我们调用Backbone.View.remove（），它实际上是this.$el.remove()在幕后，有效地删除了我们视图引用的DOM元素并释放了绑定事件。 现在我们的观点可以被垃圾收集！

你可以看到我最近如何回答这个问题的另一个角度： 保存用户数据不止一次 。 如果我没有包括Derick Bailey关于僵尸观点的开创性文章（从我获取大部分信息的地方）， 僵尸 ，我想我会失职！ 跑！ （管理骨干应用程序中的页面转换）