父视图到子视图的事件绑定关系

Parent to child view event binding relationships

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

我想知道在父子关系中应该在哪里设置事件。这不是一个具体的问题，我想这只是一个最佳实践。我的具体案例：

我有一个包含Button和List的Dropdown。在描述动作时，按下按钮，列表就会出现。单击列表中的某个项目，该项目将被选中，列表将消失。

因此，第一件事是，由于视图被初始化为Dropdown，因此创建它的人不需要访问并处理Button或List视图。所有方法都应该在父视图上调用，并且可能需要从子视图中弹出事件。

例如，Dropdown不执行：this.dropdown.button.press();，而是提供了自己的press方法，该方法只调用Button的press方法。

当用户按下按钮时，Button触发Dropdown正在收听的press事件。

onButtonPress : function () {
    if (!this.isExpanded()) {
        this.expand();
    }
    this.trigger('press');
},

Dropdown会触发按压本身，这样开发人员就可以在不接触dropdown.button的情况下获得按压事件。

这是第一个问题。Dropdown应该在onButtonPress中展开自己，还是onButtonPress只是触发按压，然后让展开侦听Dropdown自己的press事件：

onButtonPress : function () {
    this.trigger('press');
},
onPress : function () {
    if (!this.isExpanded()) {
        this.expand();
    }
},

然后它变得更加复杂，如果Dropdown的expand方法只触发expand本身：

expand : function () {
    if (this.isEnabled()) {
        this.setState('expanded', true);
        this.trigger('expand');
    }
    return this;
},
onExpand : function () {
    this.list.show();
},

还是应该是show是List:

expand : function () {
    if (this.isEnabled()) {
        this.setState('expanded', true);
        this.list.show();
        this.trigger('expand');
    }
    return this;
},

我想我只是想知道在父母/孩子关系中决定在哪里绑定事件的最佳实践。如何避免混乱的情况和可能的循环事件调用。

有人有什么想法吗？

我只需要使用DOM，而不是手动触发事件。如果希望事件首先命中父级，则将捕获设置为true，如果希望事件冒泡，则将捕捉设置为false。

这允许在捕获阶段调用事件处理程序，因此父DOM元素首先获得事件：

el.bind('someevent', somefunction, true);

这个气泡，因此子级首先接收事件，并且在子级接收事件时调用处理程序。

el.bind('someevent', somefunction, false);

一般来说，保持简单。您还可以使用委托编程模式，在该模式中，父级将为自己和子级获取事件，这样您就可以避免混淆，并可能在较大的应用程序中节省内存。

相关文章：