재귀 Backbone.js보기로 여러 번 발생하는 것을 방지하는 방법은 무엇입니까?

Question

백본으로 관리하려고하는 중첩 목록이있는 응용 프로그램이 있습니다. 각각의 개체에 대한 뷰가 있습니다. 그러나 각 목록 요소는 자신의 중첩 된 <ul> 태그를 가지며, 자체 뷰가 인스턴스화됩니다. 여기에 예입니다

<ul class='elements'> 
    <li class='element'> 
    <div> 
     <a class='edit-element'>Edit</a> 
    </div> 
    <ul class='elements'> 
     <li class='element'> 
     <div> 
      <a class='edit-element'>Edit</a> 
     </div> 
     </li> 
    </ul> 
    </li> 
</ul> 

자바 스크립트

element_view = Backbone.view.extend({ 
    events: { 
    'click .edit-element' : 'edit_element' 
    }, 
    edit_element : function(event) { 
    //code to handle editing of an element 
    } 
}); 

HTML 문제 내가 자식 요소를 클릭하면, 두보기가 edit_element 이벤트, 화재 것이다 몇 가지 이유로 문제가된다. 어떻게 구조를 구성하여 자식의 링크를 클릭하면 <li>, 그 블록은 <li>이고, 그 요소가 포함 된 <li>이 아닌 것입니다. 당신이 stopPropagation를 사용하여 일반적인 방법으로 전파를 중지 할 수 있도록

Answer 1

백본의 이벤트 핸들러는 평범한 구식의 jQuery 이벤트 핸들러를 다음과 같습니다

edit_element: function(event) { 
    event.stopPropagation() 
    //... 
} 

데모 : http://jsfiddle.net/ambiguous/Yb8rg/1/

또는 false을 반환하여 :

edit_element: function(event) { 
    //... 
    return false; 
} 

데모 : http://jsfiddle.net/ambiguous/QvaGM/1/

Answer 2

"mu가 너무 짧습니다"라고 말한 것 외에 이미이 문제를 해결하는 세 가지 방법을 생각할 수 있습니다. 내 개인적인 선호 순서대로 :

1. 더 구체적인 선택기를 사용하십시오. 이 특별한 경우에 click .edit-element:first은 아마도 편집 단추가 자식 목록의 편집 단추보다 먼저 오기 때문에 트릭을 수행합니다.
2. 백본 events 컬렉션을 사용하는 대신 관심있는 요소에 직접 바인딩하십시오. 따라서 하위 목록을 렌더링하기 전에 this.$(".edit-element").click(_.bind(myClickHandler, this))과 같은 작업을 수행하십시오.
3. 클릭 한 요소를보고 핸들러 함수에 코드를 넣고 관심이 있는지 확인하십시오.이 코드는 약간 비웃음이 될 수 있습니다. 특히 이것이 좋다고 생각하지 않습니다. 솔루션이므로 샘플 코드가 없습니다. :)