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中删除的行。

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

e.g。

将初始化中的代码更改为以下

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

和编辑，chage，更新相同。

希望它有所帮助。

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

1 个答案: