获取表中某一特定行的值并删除一行

Question

我使用把手来呈现带有数据的表格，每个表格都有编辑按钮。我需要知道，如果单击第二行中的编辑按钮，如何获取该特定行中的值。

html是这个

  <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>

脚本是

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

我的问题是，点击编辑时，只有记录数组中的最后一个元素被填充到文本框中进行编辑。甚至删除也不起作用。我不确定我哪里出错了。请改正。

Answer 1

您的方法的问题是每次单击“添加”后，您都在创建一个新模型，直到此时一切都很好。 但是随后您将在 this.model 中缓存最后创建的模型，这就是您的问题所在。您只缓存最后一个模型。相反，您应该考虑检测要删除的模型并识别您必须从 DOM 中删除的行的方法。

您应该为该视图创建一个子视图，并且显然是为其创建模板，以便将每个模型显示为不同的视图。然后将该视图附加到该视图

例如

把initialize中的代码改成下面的

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

当您添加逻辑以与子视图中的父视图通信时，您的每个添加、编辑、更改、删​​除都将收到一个要添加、编辑、更改、删​​除的模型

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

编辑、修改、更新也一样。

希望对你有帮助。