html - To get value of one particular row in a table and deletion of a row

Question

I used handlebars to render table with data with each having edit button . I need to know like, if the edit button in second row is clicked, how to fetch the values in that particular row.

Html is this

  <table class="table table-bordered">
    <thead>
    <tr>
        <th>Model</th>
        <th>Brand</th>
        <th>Year</th>
        <th>Action</th>
    </tr>
    <tr>
        <td><input class="form-control" id="modelname"></td>
        <td><input class="form-control" id="brandname"></td>
        <td><input class="form-control" id="yearname"></td>
        <td><button class="btn btn-primary add">Add</button><button class="btn btn-primary update">Update</button></td>
    </tr>

    </thead>
    <tbody class="product-list">

    </tbody>
  </table>
  </div>

<script id="list-item" type="text/x-handlebars-template">
  {{#each this}}
    <div class="list-item">   
      <tr>
          <td>{{ model }}</td>
          <td>{{ brand }}</td>
          <td>{{ year }}</td>
          <td><button class="btn btn-info edit">Edit</button>&nbsp;<button class="btn btn-danger delete">Delete</button></td>
        </tr>
    </div>
  {{/each}}  
</script>

And script is

 var Product = Backbone.Model.extend({
});

var ProductList = Backbone.Collection.extend({
  model: Product
});

var ProductView = Backbone.View.extend({
  el: '.table-bordered',
  events: {
    'click .add': 'create',
    'click .edit':'edit',
    'click .update':'update',
    'click .delete':'delete'
  },
  initialize: function(){
   // this.model=new Product();
    this.collection = new ProductList();
    this.listenTo(this.collection, "add", this.render, this);
     this.listenTo(this.collection, "edit", this.render, this);
    this.listenTo(this.collection, "change", this.render, this);
    this.listenTo(this.model,"delete", this.render, this);


  },

  render: function(){
    var source   = $("#list-item").html();
    var template = Handlebars.compile(source);
    $('.product-list').html(template(this.collection.toJSON()))
  },

  create: function(){
    //var product = new Product();
    this.model=new Product();

    var modelname= document.getElementById('modelname').value;
    var brandname=document.getElementById('brandname').value;
    var yearname= document.getElementById('yearname').value;

    this.model.set({
        'model': modelname,
        'brand': brandname,
        'year': yearname
    })
    this.collection.add(this.model);
    $('#modelname').val("");
    $('#brandname').val("");
    $('#yearname').val("");
  },
  edit:function(e){
     var jsondata=this.model.toJSON();
     console.log(jsondata.model);
      $('#modelname').val(jsondata.model);
    $('#brandname').val(jsondata.brand);
    $('#yearname').val(jsondata.year);

  },
  update:function()
    {
       // var product = new Product();
       var modelname= document.getElementById('modelname').value;
  var brandname=document.getElementById('brandname').value;
  var yearname= document.getElementById('yearname').value;
        this.model.set({
      'model': modelname,
      'brand': brandname,
      'year': yearname
    })
       $('#modelname').val("");
    $('#brandname').val("");
    $('#yearname').val("");
    },
    delete:function()
    {

    console.log(JSON.stringify(this.model));
      this.model.destroy();

    }

});

var productView = new ProductView();

My problem is, on click on edit,only the last element in array of records is getting populated onto text box for editing. And even delete doesn't work . I ain't sure where i went wrong. Please rectify.

Answer 1

The problem with your approach is every time after clicking on Add you are creating a new model till this point everything is fine. But then you are caching the lastly created model in this.model that is where your problem is. You are caching only last model. instead you should think of approach to detect model to be deleted and to identify its row which you will have to remove from DOM.

You should create one child-view of this view and obviously template for the same, in order to show each model as different view. Then append that view to this view

e.g.

change the code in initialize to following

this.listenTo(this.collection, "add", this.add);
this.listenTo(this.collection, "edit", this.edit);
this.listenTo(this.collection, "change", this.change);
this.listenTo(this.collection, "delete", this.delete);

where each of your add,edit,change,delete will receive a model which is to be added,edited,changed,deleted when you add logic to communicate with parent view in child view by using

 this.model.collection.trigger('delete', this.model);

and same for edit,chage,update.

Hope it helps.