嵌套视图：使用适当的 ui 绑定事件

Question

我有一个应用程序，其中一种类型的视图嵌套在同一类型中。像这样 http://take.ms/ylAeq

如何在视图按钮上捕获事件并在适当的视图上触发事件？

我有 ~10 触发事件的情况，因为 backbone 将事件绑定到所有内部按钮，而不仅仅是正确视图的按钮。

我有一个想法 - 我在模板中制作 id="node_body_<%= id %>" 因此每个按钮 ID 都基于它的视图模型 ID；但是我怎样才能将它传递给事件对象呢？事件：{ "click #node_body_" + id : 'method' } 无效。

Answer 1

Backbone 视图的大多数属性可以是函数而不是文字值。例如，这两个东西有相同的结果：

Backbone.View.extend({
    events: {
        'click .thing': 'do_thing'
    },
    do_thing: function() { ... }
});

和

Backbone.View.extend({
    events: function() {
        return {
            'click .thing': 'do_thing'
        };
    },
    do_thing: function() { ... }
});

因此，如果您的 events 依赖于视图的属性，那么您会希望使用函数而不是对象字面量：

events: function() {
    var events     = { };
    var event_spec = 'click #nody_body' + this.id;
    events[event_spec] = 'method';
    return events;
}

假定 id 是您在模板中使用的视图的属性。

Answer 2

问题是事件冒泡。内部视图的事件冒泡到它的父视图的 el，父视图正在监听同一选择器上的事件，进而触发它的处理程序。

这可以通过在相应视图的处理程序中停止事件传播来解决：

Backbone.View.extend({
  events: {
    'click .thing': 'do_thing'
  },
  do_thing: function(event) {
    event.stopPropagation(); // prevents event reaching parent view
  }
});

嵌套视图：使用适当的 ui 绑定事件

Nested views : binding events with proper ui

javascript

backbone.js

backbone-views

backbone-events