Почему model.set (..) заменяет несколько записей одновременно с помощью backbone.js?

Question

У меня есть одна проблема, связанная с сохранением записей из режима редактирования. Сценарий:

• Нажмите на РЕД (первые записи), она будет загружать выбранные данные модели в режиме редактирования панели.
• Обновить любое значение в текстовом поле
• Нажмите, чтобы сохранить, он будет успешно сохранен и обновлен.
• Нажмите на редактировании (вторая запись (она будет загружать выбранные данные модели в панели редактирования.
• Update любого значение в текстовом поле

• Нажмите на сохранение, это позволит сэкономить и успешно обновить вид Но проблема в том, Он заменит обновленное значение модели с row1 и row2. Я хотел бы обновить только выбранную строку. что плохого в этом коде.

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

Добавить 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); 
       } 
      }); 

Редактировать 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(); 
       } 
      }); 

Person View

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> 

Edit Template

<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(); выполнит трюк, за исключением того, что вам придется иметь дело с тем, что он удаляет ваш элемент), либо используйте одно редактирование view (что, безусловно, потребует изменения кода).