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

Nested views : binding events with proper ui

本文关键字：ui 绑定 事件 视图 嵌套      更新时间：2023-09-26

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

如何在视图按钮上捕捉事件，并在正确的视图上捕捉已触发的事件？

当我有~10被触发的事件时，我会遇到这种情况，因为主干将事件绑定到所有内部按钮，而不仅仅是正确视图的按钮。

我有一个想法——我在模板id="node_body_<%= id %>"中制作，所以每个按钮id都基于它的视图的模型id；但如何将其传递给events对象？事件：{ "click #node_body_" + id : 'method' }不起作用。

问题是事件冒泡。内部视图的气泡上的事件一直到其父视图的el，后者正在侦听同一选择器上的事件，从而触发其处理程序。

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

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

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是您在模板中使用的视图的属性。

相关文章：