1

我有一个带有嵌套列表的应用程序，我正在尝试使用主干进行管理。每个单独<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 事件，这有几个原因是有问题的。我该如何构造它，以便当我单击 child 中的链接时<li>，它会为此触发，而不是包含它的<li>任何s？<li>

4

2 回答 2

4

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/

于 2012-05-09T19:39:14.113 回答
1

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

  1. 使用更具体的选择器。在这种特殊情况下，click .edit-element:first可能会成功，因为编辑按钮位于子列表的编辑按钮之前。
  2. 不要使用 Backboneevents集合，而是直接绑定到您感兴趣的元素。因此，在渲染子列表之前，请执行类似this.$(".edit-element").click(_.bind(myClickHandler, this)).
  3. 将代码放入处理函数中以查看单击了哪个元素，并查看它是否是您感兴趣的元素。此代码会有点繁琐，我认为这不是一个特别好的解决方案，所以没有示例代码。:)
于 2012-05-10T02:13:39.580 回答