不止一次保存用戶數據

我開始學習Backbone JS，我只是有些懷疑。不止一次保存用戶數據

蔭與我下面的代碼創建我的意思是這個用戶表單http://backbonetutorials.com/videos/beginner/#/new

方案1更新用戶只有一次，但Scenario 2保存用戶不止一次，我的意思是相同的用戶信息獲得存儲不止一次在DB中，不止一次地觸發'submit'事件，爲什麼會發生這種情況？如果發生以下情況，會發生什麼情況？

下面是代碼：

<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();

來源

2015-01-21 user3815806

'render'函數不應該執行ajax調用或任何其他類型的業務邏輯 – 2015-01-21 10:42:15

大聲笑。我昨天剛剛回答了這個問題。看起來像某人必須提醒他的教程作者，他正在創建殭屍視圖！

要回答你的問題，第一個場景中工作的原因是因爲你只能創建一個鑑於，然後使用你的路由器來呈現相同視圖。但是，如果您在情景2之後觀看，那麼隨後每當您沿着路線#new時，您都會創建另一個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，一個非常活躍，穩定和良好支持的骨幹框架，你將擁有大量的工具來幫助你避免殭屍視圖）。

來源

2015-01-22 01:54:25 seebiscuit

首先，感謝您的詳細解釋..但有一個疑問：爲什麼在DOM視圖對象不存在的情況下它仍然附着在事件？ – user3815806 2015-01-22 07:31:30

我想你問，如果DOM中的事件綁定到某個節，那麼如何從DOM中刪除視圖？這是一個相當好的問題，需要比我更多的知識。 – seebiscuit 2015-01-22 23:18:27

不止一次保存用戶數據

回答

相關問題