Question

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

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

场景1仅更新用户一次，但是Scenario 2多次保存用户，我的意思是相同的用户详细信息会在数据库中多次存储，简而言之就是触发＆＃39; submit＆＃ 39;事件不止一次，为什么会发生这种情况？如果出现以下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。当然，不要错过Derick Bailey的经典文章Zombies! RUN! (Managing Page Transitions In Backbone Apps)。（顺便说一句，使用Derick的Marionette，一个非常活跃，稳定且支持良好的Backbone框架，您可以使用大量工具来帮助您避免僵尸视图）。

多次保存用户数据

1 个答案: