如何通過遞歸Backbone.js視圖來防止多次甚至衝突？

我有一個嵌套列表的應用程序，我試圖用骨幹管理。每個<li>元素都有一個視圖，但每個列表元素都有自己的嵌套<ul>標記，該標記具有自己的視圖實例化。這裏有一個例子：如何通過遞歸Backbone.js視圖來防止多次甚至衝突？

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

來源

2012-05-09 GSto

骨幹事件處理程序的只是普通的老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/

來源

2012-05-09 19:39:14

除了「畝太短」已經說過，我可以想出三種方法來解決這個問題。按我的個人偏好順序：

使用更具體的選擇器。在這種特殊情況下，click .edit-element:first可能會訣竅，因爲編輯按鈕出現在子列表的編輯按鈕之前。
代替使用Backbone events集合，直接綁定到您感興趣的元素。因此，在您呈現子列表之前，請執行諸如this.$(".edit-element").click(_.bind(myClickHandler, this))之類的操作。
將代碼放入處理程序函數中，查看點擊了哪個元素，並查看它是否是您感興趣的元素。代碼將會有點煩瑣，我不認爲這是一個特別好的解決方案，所以沒有示例代碼。 :)

來源

2012-05-10 02:13:39

如何通過遞歸Backbone.js視圖來防止多次甚至衝突？

回答

相關問題