Question

我有一个嵌套列表的应用程序，我正在尝试使用骨干管理。每个单独的<li>元素都有一个视图，但每个列表元素都有自己的嵌套<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

除了已经说过“mu太短”之外，我还可以想出三种方法来解决这个问题。按照我个人的偏好顺序：

使用更具体的选择器。在这种特殊情况下，click .edit-element:first可能会起作用，因为编辑按钮位于子列表的编辑按钮之前。
不使用Backbone events集合，而是直接绑定到您感兴趣的元素。因此，在渲染子列表之前，请执行this.$(".edit-element").click(_.bind(myClickHandler, this))之类的操作。
将代码置于处理函数内部以查看单击的元素，看看它是否是您感兴趣的元素。这个代码有点繁琐，我觉得这不是特别好解决方案，所以没有示例代码。 :)

如何使用递归Backbone.js视图防止多次偶数激活？

2 个答案: