【发布时间】：2013-10-20 04:43:10
【问题描述】：
我正在考虑将大型 UI 组件分解成更小的部分，但我不完全确定如何处理的一件事，我似乎无法找到一般信息的一件事是从子组件委派事件。
例如，假设您有一个待办事项列表，然后单击待办事项列表将更新边栏，其中包含有关待办事项的详细信息。现在我们拥有的代码基本上是 1 个带有模板的文件，并为所有内容执行所有事件。当您单击附加到列表和侧边栏的包装器的委托处理程序时，它会在 DOM 节点中搜索数据。可能有数千个可点击的行。
我想要一些类似的东西（这只是伪代码）：
app.controllers.todos = library.controller.extend({
init: function () {
// Store all the todo items in an array
this.todoItems = [];
todoItemsReturnedFromServer.forEach(function (data) {
var todoItem = new app.todo.item(data);
todoItems.push(todoItem);
});
this.todoList = new app.todo.list({data: this.todoItems}); // start with initial data
this.sidebar = new app.sidebar();
},
render: function () {
$('#wrapper').append(this.todoList.render());
$('#sidebar').append(this.sidebar.render());
}
});
因此，您将拥有一个可以添加/删除的 todoList 组件，并且您可以连接可以更新 DOM 的事件，但与数据解耦（即，您不能拥有任何 DOM 并且它可以工作）。现在，在我们的应用程序中，如果您单击一个 todoItem，则 todoItem 需要将其事件委托给 todoList 或更高级别。我不希望每个 todoItem 都有 1 个点击事件。
我唯一的想法是在父组件（如果支持）并从中创建事件的子组件上拥有一个“委托”属性。它会有一个事件和处理程序的散列。如果事件处理程序已经附加，它会忽略它。
对于这类事情还有其他例子或模式吗？
【问题讨论】：
-
您可以监控列表的点击次数，并从 listItem (event.target) 中获取 id 或其他标识符。这样，您不需要在项目上绑定任何事件，只需注入由模板和您的数据制成的 html。
-
@dandavis 问题是，我想保留 lisItem 的事件部分，因为语义上它们是 listItem 事件。委托是一个实现细节。如果我在 itemList 中设置所有处理程序，那么即使将其设置为另一个组件也没什么好处。如果我理解错了，你能给我举个例子吗？
-
您可以将事件与 listItems 捆绑在一起。关键是对所有项目只使用一种方法，从列表或内部的 DOM 中注入/获取他们可能需要的任何依赖项。这可以是附加到每个元素上的非事件 js 属性，或者只是巧妙地使用 HTML 标记将项目标识到项目的方法中。因此，它可能类似于 itemList.onclick=Items.doItemAction(e.target.itemID, this)... 在这种情况下，是的，您在列表中有一个事件，但是该操作全部在其他地方定义的 item 方法中，可能在项目制造商旁边。
标签： javascript events design-patterns delegates