5

是否可以使用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 示例

我知道可以listenTo改用，但使用事件定义似乎更干净。

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

4

1 回答 1

9

快速笔记：-

  • 在视图的事件对象中，我们不应该定义自定义事件。对于自定义事件，我们应该进行绑定。使用 bind() 方法或使用 on() 监听某个事件。
  • 如果您的子视图的 el 元素在您的父视图的 el 中，您也可以直接监听子视图的事件，前提是您没有从子视图的事件处理程序返回 false。看看这个：父视图在子视图上的元素上监听事件的代码

如果您只想使用自定义事件，您可以在此处查看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();
于 2013-04-07T10:22:32.340 回答