多次保存用户数据

Saving User Data more than once

本文关键字：用户数 数据 用户 保存      更新时间：2023-09-26

我开始学习Backbone JS，我只是有些怀疑。

我

正在用下面的代码创建这个，我的意思是这个用户表单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();

哈哈。我昨天刚刚回答了这个问题。看起来有人必须提醒他的教程的作者他正在创建僵尸视图！

为了回答您的问题，第一种方案起作用的原因是您只创建了一个视图，然后使用路由器呈现相同的视图。但是，如果您以后每次按照该路线查看方案 2，#new创建另一个AddUserView视图并呈现该视图。你过去的所有观点都不会消失，因为它们仍在侦听他们管理的 DOM 的某些元素中的事件。在您的情况下，您有

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

因此，每个呈现的视图都在侦听<submit>按钮元素。

查看此答案， 骨干 js 模型保存不止一次，了解更多详情。当然，不要错过德里克贝利的经典文章僵尸！跑！（管理主干应用中的页面过渡）。（顺便说一句，使用Derick's Marionette，一个非常活跃，稳定且支持良好的骨干框架，您将拥有大量工具来帮助您避免僵尸视图）。

相关文章：