多次保存用户数据

Question

我开始学习BackboneJS，只是有点疑惑。

我正在用下面的代码创建这个我的意思是这个用户表单 http://backbonetutorials.com/videos/beginner/#/new

场景 1 仅更新用户一次，但 Scenario 2 多次保存用户，我的意思是相同的用户详细信息在数据库中存储了不止一次，简而言之，它触发了 'submit' 事件不止一次，为什么会这样？如果出现以下 2 种情况，后台会发生什么情况？

代码如下：

<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">
        <form class="add-user-form" >
            <legend><%= user ? 'Update' : 'Create' %>  User</legend>
            <label>First Name</label>
            <input type="text" name="firstname" id="firstname" value="<%= user ? user.get('firstName') : '' %>"/>
            <label>Last Name</label>
            <input type="text" name="lastname" id="lastname" value="<%= user ? user.get('lastName') : '' %>" />
            <label>Age</label>  
            <input type="text" name="age" id="age" value="<%= user ? user.get('age') : '' %>"/>
            <hr/>
            <% if(user) { %>
                <input type="hidden" id="id" value="<%= user.id %>">
            <% }; %>
            <input type="submit" value="<%= user ? 'Update' : '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(){
            console.log('Creating User...');
            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,{
                success: function(user){
                    console.log('INSIDE SUCCESS..');
                    router.navigate('',{trigger: 'true'});
                }
            }); 
        }       
    });

    var Router = Backbone.Router.extend({
        routes:{
            '':'home',
            'new':'addUser'
        }       
    });

场景 1： // 仅触发保存一次，我的意思是它运行完美。

var usersListView = new UsersListView();
    var addUserView = new AddUserView();

    var router = new Router();
    router.on('route:home',function(){
        usersListView.render();
    });
    router.on('route:addUser',function(){
        addUserView.render();
    });


    Backbone.history.start();

情景 2： // 多次保存用户数据，为什么？？？

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

哈哈。我昨天刚回答了这个问题。看来必须有人提醒教程的作者他正在创建 Zombie Views!

回答你的问题，第一个场景之所以有效是因为你只创建了一个视图，然后使用你的路由器渲染那个相同视图。但是，如果您以后每次都按照路线 #new 查看 场景 2，您将创建另一个 AddUserView 视图并渲染该视图。您过去的所有视图都不会消失，因为它们仍在监听它们管理的 DOM 的某些元素中的事件。在你的情况下，你有

events: {
  'submit .add-user-form': 'saveOrUpdateUser' 
}

所以每个呈现的视图都在监听 <submit> 按钮元素。

查看此答案，Backbone js Model Save more than once, for more details. And of course, don't miss Derick Bailey's classic article Zombies! RUN! (Managing Page Transitions In Backbone Apps)。（顺便说一句，使用 Derick 的 Marionette，一个非常活跃、稳定且支持良好的 Backbone 框架，您将拥有大量工具来帮助您避免僵尸视图。

多次保存用户数据

Saving User Data more than once

javascript

jquery

backbone.js