backbone.js 嵌套视图:将事件与正确的ui绑定

a7qyws3x  于 2022-11-24  发布在  其他
关注(0)|答案(2)|浏览(136)

我有一个应用程序,其中一种类型的视图嵌套在同一类型中。类似于http://take.ms/ylAeq
如何捕获视图按钮上的事件和正确视图上的激发事件?
当我有**~10**个触发事件时,我会遇到这样的情况,因为 Backbone.js 将事件绑定到所有内部按钮,而不仅仅是正确视图的按钮。
我有一个想法--我在模板id="node_body_<%= id %>"中创建了一个按钮,这样每个按钮的id都基于它的视图的模型id;但是如何将它传递给事件对象呢?{ "click #node_body_" + id : 'method' }不起作用。

klh5stk1

klh5stk11#

问题是事件冒泡。内部视图上的事件冒泡到其父视图的el上,后者监听同一选择器上的事件,进而触发其处理程序。
这可以通过在相应视图的处理程序中停止事件的传播来解决:

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

jdgnovmf2#

Backbone.js 视图的大多数属性都可以是函数而不是文字值。例如,这两个属性具有相同的结果:

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

相关问题