Question

我正在寻找使观点独立的方法。因此，视图的事件被约束到该视图，而不是进入子元素或父元素。

backbone.js框架使用jQuery .on方法绑定视图顶部元素（view.el）上的事件。由于我有嵌套视图，当我单击视图B的按钮时，事件也将在视图A上触发。我知道我可以在视图B的按钮上添加一个处理程序并返回false，但这样我需要知道父视图的所有事件并始终处理所有这些事件。

下面是一个问题示例：http://jsfiddle.net/57RAM/3/

我想点击MyViewB按钮，不要触发ViewA事件。我尝试在视图B的事件中添加'all': -> return false，但它没有效果。

有什么建议吗？

Answer 1

您可以在嵌套视图（MyViewB）的单击处理程序中使用ev.stopPropagation()，以防止事件冒泡DOM树。

Answer 2

如果问题是视图B必须是可重用的，并且如果你不介意视图A知道这一点，那么你可以使用更具体的事件选择器来进行视图A绑定。

在示例中，使用了一个简单的“按钮”选择器，它将捕获视图A中的两个按钮及其子视图B.如果使用类，例如“.btn”或“button.view-a”将阻止这个问题。

可以看到以下代码段here使用“.btn”绑定事件。

events:
    'click .btn': 'click'

click: (ev) ->
    alert('MyViewA button click')

initialize: ->
    $('<button class="btn">').text('MyViewA').appendTo(@el)
    child = new MyViewB
    $(child.el).appendTo(@el)

backbone.js：如何在嵌套视图中停止事件传播

2 个答案: