백본의 테이블 행 삭제 버튼과 ID를 연결하는 방법

backbone.js에 새로운 점은 내 테이블의 모든 행에서 고유 ID를 생성하기 위해 backbone.js에 필요한 구문/코드입니다. delete gets pressed 테이블에서 특정 행을 삭제합니다.백본의 테이블 행 삭제 버튼과 ID를 연결하는 방법

$(function(){ 

    var Person = Backbone.Model.extend({ 
     id: 0, 
     name: 'default name', 
     age: 100 
    }); 

    var PersonCollection = Backbone.Collection.extend({ 
     model: Person 
     }); 

    var PersonView = Backbone.View.extend({ 
     el: $('#personEL'), 

     events: 
     { 
      "click #login-btn" : "loginClick" 
     }, 
     loginClick: function() 
     { 
      var name = $('#name').val(); 
      var age = $('#age').val(); 
      var newPerson = new Person({id: 1,name: name, age : age});   

      this.personCollection.add(newPerson);   
      var showit = new zview({model: newPerson}); 

     }, 
     initialize: function(){ 
     this.personCollection = new PersonCollection(); 

      this.render(); 
     }, 

     render: function() 
     { 
       var template = _.template($("#personInputTemplate").html(), {}); 
     this.el.html(template); 
       return this; 
     } 
    }); 



    zview = Backbone.View.extend({ 
     el: $('#personTable'), 
     events:{ 
      'click #delete' : 'deleteItem' 
     }, 
     initialize: function() 
     { 

     this.render(); 
     return this; 
     } 
     , 
     render: function() 
     { 
      var template = _.template($('#personDisplayTemplate').html(), this.model.toJSON()); 
      console.log(template); 
      $(this.el).append(template); 
     } 
     , 
     deleteItem: function() 
     { 
      console.log('delete'); 
     } 
    }); 


var persons = new PersonView(); 

    });

HTML :

<body> 




<script type="text/template" id="personInputTemplate"> 
    <p>Person Name<input type="text" id="name" /></p> 
    <p>Person Age<input type="text" id="age" /></p>   
    <p><button id="login-btn">Save</button></p> 
</script> 

<script type="text/template" id="personDisplayTemplate"> 
      <tr> 
       <td><span><%= name ? name : '' %></span></td> 
       <td><span><%= age ? age : '' %></span></td> 

       <td><a href="#" id="<%= id ? id : '' %>" class="delete"> Delete</a> </label></td> 

      </tr> 
</script> 


<div id ="personEL"></div> 
<div id="showPerson"></div> 
<div id="display"> 
     <table id="personTable"> 

     </table> 
    </div>

어떤 도움이 조언은, 코드 감사드립니다.

출처

2011-12-12 Khurram Ijaz

이 경우 id 초를 넘길 필요가 없습니다. 이벤트 핸들러에 이벤트 객체가 전달되고 target 속성이 있고 click 이벤트의 경우 target이 클릭 된 DOM 요소가됩니다. 이런 식으로 뭔가 트릭 수행해야합니다

또한

deleteItem: function(ev) { 
    var $tr = $(ev.target).closest('tr'); 
    // Now $tr is the jQuery object for the <tr> containing the .delete 
    // element that was clicked. 
    $tr.remove(); 
}

, 템플릿을 (제대로) 삭제 링크 class="delete"를 사용하지만 이벤트가 id="delete"와 요소에 바인딩; 당신이 당신의 삭제 링크에서 길 잃은 </label>을 가지고, 또한

events: { 
    'click .delete': 'deleteItem' 
}

그리고 당신은 아마 id는 모두 속성 드롭 할 수 있습니다 : 당신은뿐만 아니라 당신의 events를 해결하기 위해 할 것 그냥이 괜찮을한다 :

<td><a href="#" class="delete">Delete</a></td>

당신은 내가 <tr>에 데이터 속성을 사용하려는 id의 필요 할 경우

<tr data-id="<%= id ? id : '' %>">

을 한 다음에 액세스 할 수 $tr.data('id')를 사용할 수 있습니다. <tr>에 부착하면 행의 어디서나 쉽게 찾을 수 있으며 데이터 속성을 사용하면 HTML id 속성이 복제되고 유효하지 않은 HTML로 끝나는 것을 방지 할 수 있습니다. id 값은 서버에서 가져온 것이므로 정의해야합니다.

출처

2011-12-12 23:36:24

답 답장을 보내 주셔서 감사합니다. 하지만 레코드가 서버에서 결국 삭제되도록 ID를 여전히 필요합니다. 나는 그것을 어떻게 얻을 것인가? –

@Mian : 행에 데이터 속성을 사용하고 싶습니다. 내 업데이트를 참조하십시오. –

백본의 테이블 행 삭제 버튼과 ID를 연결하는 방법

답변

관련 문제