如何使用遞歸Backbone.js視圖防止多次均勻觸發？

Question

我有一個帶有嵌套列表的應用程序，我正在嘗試使用主干網進行管理。 每個<li>元素都有一個視圖，但是每個list元素都有自己的嵌套<ul>標記，該標記具有實例化的自己的視圖。 這是一個例子：

的HTML

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

的JavaScript

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

問題是，如果我單擊一個子元素，則兩個視圖都將觸發那里的edit_element事件，這由於多個原因而有問題。 如何構造該結構，以便當我單擊子<li>的鏈接時，該鏈接針對該<li>觸發，而不觸發包含該鏈接的任何<li> ？

Answer 1

Backbone的事件處理程序只是普通的舊jQuery事件處理程序，因此您可以使用stopPropagation以通常的方式停止傳播：

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

除了已經說過的“畝太短”之外，我還可以想到三種解決方法。 按照我個人的偏愛順序：

1. 使用更具體的選擇器。 在這種情況下， click .edit-element:first可能會成功，因為編輯按鈕位於子列表的編輯按鈕之前。
2. 不要使用Backbone events集合，而是直接綁定到您感興趣的元素。因此，在呈現子列表之前，請執行this.$(".edit-element").click(_.bind(myClickHandler, this)) 。
3. 將代碼放入處理函數中，以查看單擊了哪個元素，然后查看它是否是您感興趣的元素。此代碼可能有點麻煩，我認為這不是一個特別好的解決方案，因此沒有示例代碼。 :)