Чтобы получить значение одной конкретной строки в таблице и удалить строку

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

Проблема с вашим подходом - каждый раз после нажатия кнопки «Добавить» вы создаете новую модель до этого момента, все в порядке. Но тогда вы кэшируете последнюю созданную модель в этой моделе, где ваша проблема. Вы кэшируете только последнюю модель. вместо этого вы должны подумать о подходе к обнаружению модели, которую нужно удалить, и определить ее строку, которую вам придется удалить из DOM.

Вы должны создать один вид с ребенком этого вида и, очевидно, шаблон для него, чтобы показать каждую модель как другой вид. Затем добавьте этот вид этого вида

например.

изменить код в инициализируется следующие

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, update.

Надеюсь, это поможет.