父对子视图事件绑定关系

时间:2012-02-22 23:11:53

标签: javascript model-view-controller events javascript-events event-handling

我想知道在亲子关系中应该设置哪些事件。这不是一个特定的问题,只是我猜的最佳实践。我的具体案例:

我有Dropdown,其中包含ButtonList。描述操作,按下按钮,出现列表。单击列表中的项目,该项目被选中,列表消失。

首先,由于视图初始化为Dropdown,因此制作该视图的人不需要进入并处理ButtonList视图。应该在父视图上调用所有方法,并且可能需要从子视图中冒充出事件。

例如,代替执行:this.dropdown.button.press();Dropdown提供了自己的press方法,只调用Button的按下方法。

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

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的{​​{1}}方法只会触发expand

expand

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

的那个
List

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

有人有任何想法吗?

1 个答案:

答案 0 :(得分:0)

我只是简单地使用DOM而不是手动触发事件。如果您希望事件首先命中父项,则将捕获设置为true,如果您希望事件冒泡,则设置为false。

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

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

这个气泡,因此孩子们首先接受事件,并且当孩子们接收事件时调用处理程序。

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

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