Javascript 如何使用“Backbone.View.events”定义侦听自定义子视图事件？

是否可以使用

主干.View.events

定义来侦听自定义子视图事件

子定义

所有

click

事件都被缓存并触发my

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>");
    }
});

创建并渲染父对象

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

我知道可以使用

listenTo

，但使用事件定义似乎更简洁

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

快速注释：-

• 在视图的事件对象中，我们不应该定义自定义事件。对于自定义事件，我们应该进行绑定。使用bind（）方法或使用on（）侦听某个事件
• 如果子视图的el元素在父视图的el中，只要不从子视图的事件处理程序返回false，也可以直接侦听子视图el上的事件。 看看这个：

如果只想使用自定义事件，可以在此处看到

var Child=Backbone.View.extend({
初始化：函数（选项）{
this.parent=options.parent；
},
活动：{
“单击”：“单击”
},
单击：函数（）{
警报（“已单击视图”）；
此.parent.trigger（“customEvent”）；
},
render:function（）{
这个.$el.html（“点击我”）；
}
});
var Parent=Backbone.View.extend({
初始化：函数（）{
this.on（'customEvent'，this.action）；
},
行动：功能（）{
警报（“我的子视图触发了自定义事件”）；
},
render:function（）{
var child=新子项（{parent:this}）；
本.$el.append（child.el）；
child.render（）；
}
});
var parent=新父级（）；
父项$el.appendTo（文件正文）；
parent.render（）；

您对此有何看法。$el.trigger（“customEvent”）？再一次，您的el元素没有侦听“customEvent”，因此这也不起作用。正确的？请看一看JSbin代码。是的。很好。这是因为父视图正在侦听el中存在的元素上的自定义事件。我说的是儿童观。此自定义事件不会在子视图内触发，因为子视图未侦听它。但在events对象中提及自定义事件并不是一个好的做法。如果您觉得合适，请选择绑定。现在您的子视图也在侦听el元素上的customEvent，因此现在它将触发处理程序。我的目的是构建一个选择器（例如颜色选择器），在完成后触发事件，并允许父视图对此作出反应。

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

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();