Question

是否可以使用Backbone.View.events定义来侦听自定义子视图事件？

儿童定义

缓存所有click个事件并触发我的clicked功能：

var Child = Backbone.View.extend({
    events : {
        'click' : 'clicked'
    },
    clicked: function() {
       alert('View was clicked');
       this.trigger("customEvent");  
    },
    render: function() {
      this.$el.html("<span>Click me</span>");
    }
});

家长定义

为什么customEvent个事件不会调用我的action函数？

var Parent = Backbone.View.extend({
    events : {
        'customEvent' : 'action'
    },
    action : function() {
       alert('My sub view triggered a custom event');  
    },
    render : function() {
      var child = new Child();
      this.$el.append(child.el);
      child.render();
    }
});

创建并渲染父

var parent = new Parent();
parent.$el.appendTo(document.body);
parent.render();

jsfiddle example

我知道可以使用listenTo代替，但使用事件定义似乎更清晰。

我的目的是建立一个子视图（例如颜色选择器），它在事件完成后触发事件。

Answer 1

快速注释： -

在视图的事件对象中，我们不应该定义自定义事件。对于自定义事件，我们应该做绑定。使用bind（）方法或使用on（）监听某些事件。
如果你的子视图的el元素在你父视图的el里面，你可以直接听孩子的el上的事件，前提是你没有从孩子的事件处理程序返回false。看看这个：Code where parent view is listening event on element onside child view

如果您只想使用自定义事件，可以在此处查看Your Updated Fiddle

var Child = Backbone.View.extend({
    initialize: function(options) {
        this.parent = options.parent;
    },
    events : {
        'click' : 'clicked'
    },
    clicked: function() {
       alert('View was clicked');
       this.parent.trigger("customEvent");  
    },
    render: function() {
      this.$el.html("<span>Click me</span>");
    }
});

var Parent = Backbone.View.extend({
    initialize: function() {
        this.on('customEvent', this.action);
    },
    action : function() {
       alert('My sub view triggered a custom event');  
    },
    render : function() {
      var child = new Child({parent: this});
      this.$el.append(child.el);
      child.render();
    }
});

var parent = new Parent();
parent.$el.appendTo(document.body);
parent.render();

如何使用`Backbone.View.events`定义来监听自定义子视图事件？

1 个答案: