title: why model.set(..) replace multiple records at a time using backbone.js?
body: <p>I have one problem which is related to saving records from edit mode. 
  <strong>Scenario:</strong></p>
  
  <ul>
  <li>Click on edit (first records), it will load selected model data in
  edit mode panel.</li>
  <li>Update any value in textbox</li>
  <li>Click on save, it will save successfully and refresh view.</li>
  <li>Click on edit (second records(, it will load selected model data in
  edit panel.</li>
  <li>Update any value in textbox</li>
  <li><p>Click on save, it will save successfully and refresh view
  But the problem is It will replace updated model value with Row1 and Row2. I would like to update only selected row. What was wrong in this code.</p>
  
  <pre><code> 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 };
                   }
  </code></pre></li>
  </ul>
  
  <p><strong>Model and Collection</strong></p>
  
  <pre><code>App.Models.Person = Backbone.Model.extend({
                  defaults: { name: '', age: 0, occupation: '' }
              });
              App.Collections.People = Backbone.Collection.extend({
                  model: App.Models.Person
              });
  </code></pre>
  
  <p><strong>Add Person</strong></p>
  
  <pre><code>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);
                  }
              });
  </code></pre>
  
  <p><strong>Edit Person</strong></p>
  
  <pre><code>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();
                  }
              });
  </code></pre>
  
  <p><strong>Person View</strong></p>
  
  <pre><code>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();
                  }
              });
  </code></pre>
  
  <p><strong>People View</strong></p>
  
  <pre><code>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);
                  }
              });
  </code></pre>
  
  <p><strong>Default Data</strong></p>
  
  <pre><code> 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 });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>   &lt;table border="0"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th style="width: 180px"&gt;Name&lt;/th&gt;
                  &lt;th style="width: 50px"&gt;Age&lt;/th&gt;
                  &lt;th style="width: 120px"&gt;Occupation&lt;/th&gt;
                  &lt;th style="width: 50px"&gt;&lt;/th&gt;
                  &lt;th style="width: 50px"&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody id="personList"&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;div id="addPersonWrapper"&gt;
          &lt;div class="formRow"&gt;
              &lt;div class="left"&gt;
                  &lt;input class="add" type="button" value="Add Person" /&gt;
              &lt;/div&gt;
              &lt;div class="clearall"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="addPerson"&gt;
              &lt;div class="formRow"&gt;
                  &lt;div class="left"&gt;Person Name&lt;/div&gt;
                  &lt;div class="right"&gt;
                      &lt;input class="name" type="text" placeholder="Name of the person" /&gt;
                  &lt;/div&gt;
                  &lt;div class="clearall"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="formRow"&gt;
                  &lt;div class="left"&gt;Person Age&lt;/div&gt;
                  &lt;div class="right"&gt;
                      &lt;input class="age" type="text" placeholder="Age of the person" /&gt;
                  &lt;/div&gt;
                  &lt;div class="clearall"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="formRow"&gt;
                  &lt;div class="left"&gt;Person Occupation&lt;/div&gt;
                  &lt;div class="right"&gt;
                      &lt;input class="occupation" type="text" placeholder="Occupation of the person" /&gt;
                  &lt;/div&gt;
                  &lt;div class="clearall"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="formRow"&gt;
                  &lt;div class="left"&gt;
                      &lt;input class="save" type="button" value="Save Person" /&gt;
                  &lt;/div&gt;
                  &lt;div class="clearall"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="editPersonWrapper"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>List Template</strong></p>
  
  <pre><code> &lt;script id="listTemplate" type="text/template"&gt;
          &lt;td&gt;&lt;%= name %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= age %&gt;&lt;/td&gt;
          &lt;td&gt;&lt;%= occupation %&gt;&lt;/td&gt;
          &lt;td style="text-align:center"&gt;&lt;a class="edit" href="#"&gt;Edit&lt;/a&gt;&lt;/td&gt;
          &lt;td style="text-align:center"&gt;&lt;a class="delete" href="#"&gt;Delete&lt;/a&gt;&lt;/td&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>Edit Template</strong></p>
  
  <pre><code> &lt;script id="editTemplate" type="text/template"&gt;
          &lt;h3&gt;Edit Person&lt;/h3&gt;
          &lt;div class="formRow"&gt;
              &lt;div class="left"&gt;Person Name&lt;/div&gt;
              &lt;div class="right"&gt;
                  &lt;input class="name" type="text" placeholder="Name of the person" value="&lt;%= name %&gt;" /&gt;
              &lt;/div&gt;
              &lt;div class="clearall"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="formRow"&gt;
              &lt;div class="left"&gt;Person Age&lt;/div&gt;
              &lt;div class="right"&gt;
                  &lt;input class="age" type="text" placeholder="Age of the person" value="&lt;%= age %&gt;"/&gt;
              &lt;/div&gt;
              &lt;div class="clearall"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="formRow"&gt;
              &lt;div class="left"&gt;Person Occupation&lt;/div&gt;
              &lt;div class="right"&gt;
                  &lt;input class="occupation" type="text" placeholder="Occupation of the person" value="&lt;%= occupation %&gt;"/&gt;
              &lt;/div&gt;
              &lt;div class="clearall"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="formRow"&gt;
              &lt;div class="left"&gt;
                  &lt;input class="save" type="button" value="Save Person" /&gt;
              &lt;/div&gt;
              &lt;div class="clearall"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>Can any body help me to finding the cause of the problem. Any comment and suggestions would be highly appreciated!</p>