爲什麼model.set（..）使用backbone.js一次替換多個記錄？

Question

我有一個問題，它涉及到從編輯模式保存記錄。 場景：

• 點擊編輯（第一記錄），它會在 編輯模式面板加載選擇的模型數據。
• 更新文本框中的任何值
• 單擊保存，它將成功保存並刷新視圖。
• 單擊Edit（第二記錄（，它將在 編輯面板中加載所選模型數據。
• 更新在文本框中的任何值

• 點擊保存，它會成功保存並刷新視圖 但問題是它將替換ROW1和行2更新模型的價值。我想只更新所選行。什麼是錯誤的驗證碼。

  window.App = { Models: {}, Collections: {}, Views: {}, Helper: {} } 
         App.Helper.getFormsValue = function (form) { 
          var newName = form.find('.name').val(); 
          var newAge = form.find('.age').val(); 
          var newOccupation = form.find('.occupation').val(); 
          return { name: newName, age: newAge, occupation: newOccupation }; 
         } 
  

型號和Co llection

App.Models.Person = Backbone.Model.extend({ 
       defaults: { name: '', age: 0, occupation: '' } 
      }); 
      App.Collections.People = Backbone.Collection.extend({ 
       model: App.Models.Person 
      }); 

添加個人

App.Views.AddPerson = Backbone.View.extend({ 
       el: '#addPersonWrapper', 
       events: { 
        'click .add': 'addPersonForm', 
        'click .save': 'addPerson' 
       }, 
       addPersonForm: function (e) { 
        $(e.target).hide(); 
        this.$el.find('.addPerson').show(); 
       }, 
       addPerson: function() { 
        var form = this.$el; 
        form.find('.addPerson').hide(); 
        form.find('.add').show(); 
        var person = new App.Models.Person(App.Helper.getFormsValue(form)); 
        this.collection.add(person); 
       } 
      }); 

編輯個人

App.Views.EditPerson = Backbone.View.extend({ 
       el: '.editPersonWrapper', 
       template: template.get('editTemplate'), 
       initialize: function() { 
        this.$el.show(); 
        this.rentder(); 
       }, 
       events: { 
        'click .save': 'savePerson' 
       }, 
       rentder: function() { 
        this.$el.html(this.template(this.model.toJSON())); 
       }, 
       savePerson: function() { 
        console.log(this.model.toJSON()); 
        var form = this.$el; 
        this.model.set(App.Helper.getFormsValue(form)); 
        this.$el.hide(); 
       } 
      }); 

人稱視角

App.Views.Person = Backbone.View.extend({ 
       tagName: 'tr', 
       template: template.get('listTemplate'), 
       initialize: function() { 
        this.model.on("change", this.render, this); 
        this.model.on('destroy', this.remove, this); 
        this.on("edit", function (view) { 
         var editperson = new App.Views.EditPerson({ model: view.model }); 
        }.bind(this)); 
       }, 
       events: { 
        'click .edit': 'editPerson', 
        'click .delete': 'deletePerson' 
       }, 
       render: function() { 
        this.$el.html(this.template(this.model.toJSON())); 
        return this; 
       }, 
       editPerson: function() { 
        this.trigger("edit", this); 
       }, 
       deletePerson: function (e) { 
        this.model.destroy(); 
       }, 
       remove: function() { 
        this.$el.remove(); 
       } 
      }); 

人民觀

App.Views.People = Backbone.View.extend({ 
       el: '#personList', 
       initialize: function() { 
        this.collection.on("add", this.addPerson, this); 
        this.render(); 
       }, 
       render: function() { 
        this.collection.each(this.addPerson, this); 
       }, 
       addPerson: function (person) { 
        var personView = new App.Views.Person({ model: person }); 
        this.$el.append(personView.render().el); 
       } 
      }); 

默認數據

var peopleCollection = new App.Collections.People([ 
       { name: 'Imdadhusen', age: 31, occupation: 'M.C.A.' }, 
       { name: 'Manindar', age: 27, occupation: 'B.E.I.T.' }, 
       { name: 'Kuber', age: 32, occupation: 'M.S.C.I.T.' }, 
       { name: 'Rashidali', age: 5, occupation: 'S.K.G' }]); 
      var addPerson = new App.Views.AddPerson({ collection: peopleCollection }); 
      var peopleView = new App.Views.People({ collection: peopleCollection }); 

HTML

<table border="0"> 
     <thead> 
      <tr> 
       <th style="width: 180px">Name</th> 
       <th style="width: 50px">Age</th> 
       <th style="width: 120px">Occupation</th> 
       <th style="width: 50px"></th> 
       <th style="width: 50px"></th> 
      </tr> 
     </thead> 
     <tbody id="personList"> 
     </tbody> 
    </table> 
    <div id="addPersonWrapper"> 
     <div class="formRow"> 
      <div class="left"> 
       <input class="add" type="button" value="Add Person" /> 
      </div> 
      <div class="clearall"></div> 
     </div> 
     <div class="addPerson"> 
      <div class="formRow"> 
       <div class="left">Person Name</div> 
       <div class="right"> 
        <input class="name" type="text" placeholder="Name of the person" /> 
       </div> 
       <div class="clearall"></div> 
      </div> 
      <div class="formRow"> 
       <div class="left">Person Age</div> 
       <div class="right"> 
        <input class="age" type="text" placeholder="Age of the person" /> 
       </div> 
       <div class="clearall"></div> 
      </div> 
      <div class="formRow"> 
       <div class="left">Person Occupation</div> 
       <div class="right"> 
        <input class="occupation" type="text" placeholder="Occupation of the person" /> 
       </div> 
       <div class="clearall"></div> 
      </div> 
      <div class="formRow"> 
       <div class="left"> 
        <input class="save" type="button" value="Save Person" /> 
       </div> 
       <div class="clearall"></div> 
      </div> 
     </div> 
    </div> 
    <div class="editPersonWrapper"> 
    </div> 

列表模板

<script id="listTemplate" type="text/template"> 
     <td><%= name %></td> 
     <td><%= age %></td> 
     <td><%= occupation %></td> 
     <td style="text-align:center"><a class="edit" href="#">Edit</a></td> 
     <td style="text-align:center"><a class="delete" href="#">Delete</a></td> 
    </script> 

編輯模板

<script id="editTemplate" type="text/template"> 
     <h3>Edit Person</h3> 
     <div class="formRow"> 
      <div class="left">Person Name</div> 
      <div class="right"> 
       <input class="name" type="text" placeholder="Name of the person" value="<%= name %>" /> 
      </div> 
      <div class="clearall"></div> 
     </div> 
     <div class="formRow"> 
      <div class="left">Person Age</div> 
      <div class="right"> 
       <input class="age" type="text" placeholder="Age of the person" value="<%= age %>"/> 
      </div> 
      <div class="clearall"></div> 
     </div> 
     <div class="formRow"> 
      <div class="left">Person Occupation</div> 
      <div class="right"> 
       <input class="occupation" type="text" placeholder="Occupation of the person" value="<%= occupation %>"/> 
      </div> 
      <div class="clearall"></div> 
     </div> 
     <div class="formRow"> 
      <div class="left"> 
       <input class="save" type="button" value="Save Person" /> 
      </div> 
      <div class="clearall"></div> 
     </div> 
    </script> 

任何機構可以幫我找到問題的原因。任何意見和建議將不勝感激！

Answer 1

當用戶單擊保存時，您不會刪除編輯視圖。我沒有真正關注你的HTML，但問題似乎是你所有的編輯視圖（我說所有，因爲你不刪除它們，所以他們積累）共享相同的元素。因此，當用戶點擊進行保存時，所有編輯視圖都會捕獲點擊事件，因此將修改應用到他們自己的模型中。

對於一個解決方案，要麼刪除編輯視圖，一旦他們不再使用（this.remove();將做的伎倆，除非你必須處理的事實，它會刪除你的元素），要麼使用一個單一的編輯視圖（這肯定會要求你改變更多的代碼）。