테이블에서 특정 행의 값을 가져오고 행을 삭제하려면

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에서 제거해야 할 행을 식별하는 접근 방식을 생각해야합니다.

각보기를 다른보기로 표시하려면이보기의 하위보기 하나와 동일한보기의 템플리트를 만들어야합니다. 그런 다음이보기에 해당보기를 추가하십시오.

예 :

변경하여 추가, 편집, 변화의 각, 편집, 추가 할 수있는 모델을 받게됩니다 삭제, 변경 위치를 통신하는 로직을 추가 할 때 삭제

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

을 다음과 초기화의 코드 편집, CHAGE, 업데이트

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

와 같은를 사용하여 아이 뷰의 부모보기.

희망이 있습니다.