Question

Iam学习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>

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

Answer 1

@MarciaYudkin您会注意到，当您第一次加载网站并创建用户时，第一个用户不会保存重复内容。但是，下次填写CreateUser表单时，用户将被保存两次。这里发生的事情是你正在遭受 Zombie Views ！（稀释！）

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

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

每次用户关注route:addUser路线时，他们最终都会创建新的AddUserView。此视图呈现自身并将其自身附加到DOM。你会认为，因为你＆＃34;删除＆＃34;你从DOM的旧观点，它会消失，对吧？好吧， ---来自DOM ---但不是来自内存！由于该视图仍然具有绑定到DOM的事件，因此它不会获得垃圾回收。当触发绑定到任何先前视图的DOM元素时（例如通过单击它），当前以及所有旧的，未处置的视图仍然绑定到它，并且所有视图都响应触发器。这就是你发生的事情。在这里，请看我fiddle我做了。

如何解决

除此之外的方法是保持对周围视图的引用，以便您可以正确处理它。因此，例如，您可以在路由器中附加对视图的引用，并执行，

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

你可以看到我最近如何回答这个问题的另一个角度：Saving User Data more than once。如果我没有包括Derick Bailey关于僵尸观点的开创性文章（我从中得到大部分信息），我认为我会失职，Zombies! RUN! (Managing Page Transitions In Backbone Apps)

Backbone js Model保存多次

1 个答案:

如何解决