骨干 js 模型 保存不止一次

Backbone js Model Save more than once

本文关键字：不止一次 保存 模型 js 骨干      更新时间：2023-09-26

我正在学习Backbone js，所以我已经开始创建示例应用程序。

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

实际上我正在尝试练习这个视频：https://www.youtube.com/watch?v=FZSjvWtUxYk

输出如下所示：http://backbonetutorials.com/videos/beginner/#/new

这是我的代码： 

<html>
<head>
<link rel="stylesheet"
    href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script type="text/javascript">
    /*$.getJSON('api/users/1',function(data){
        console.log(data);
    });*/
</script>

</head>
<body>
    <div class="container">
        <h1> User Manager</h1>
        <hr/>       
        <div class="page"></div>
    </div>
    <script type="text/template" id="user-list-template">
        <a href="#/new" class="btn btn-primary">New User</a>
        <hr/>
        <table class="table stripped">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <% _.each(users, function(user){  %>
                <tr>
                    <td><%= user.get('firstName') %></td>
                    <td><%= user.get('lastName') %></td>
                    <td><%= user.get('age') %></td>
                </tr>
                <% }); %>                       
            </tbody>
        </table>
    </script>
    <script type="text/template" id="add-user-template">
        <legend>Create User</legend>
        <form class="add-user-form">
            First Name <input type="text" id="firstName"/><br/>
            Last Name <input type="text" id="lastName"/><br/>
            Age <input type="text" id="age"/><hr/>
            <input type="submit" value="Create User">
        </form>
    </script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/javascript">
    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();
</script>
</body>
</html>

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

@MarciaYudkin您会

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

僵尸视图是你认为已经消失的视图，但实际上仍然在后台。既然他们还活着，他们也仍然被束缚着它的视线events。在代码中检测到的僵尸视图是：

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 元素并释放绑定事件。现在我们的视图可以被垃圾回收！

你可以看到我最近是如何从另一个角度回答这个问题的：多次保存用户数据。我想如果我没有包括德里克贝利关于僵尸观点的开创性文章（我从那里获得大部分信息），僵尸！跑！（管理主干应用中的页面过渡）

相关文章：