模块化 JS 组件中的委派模式

Question

我正在考虑将大型 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或更高版本。我不想为每个待办事项提供 1 次点击事件。

我唯一的想法是在父组件（如果支持）并从中创建事件的子组件上有一个"委托"属性。它将具有事件和处理程序的哈希值。如果事件处理程序已附加，则只需忽略它。

这类事情还有其他例子或模式吗？

Answer 1

您是否尝试过使用客户端 MVC 框架？这些是为了解决此类问题而创建的。我建议从骨干开始.js。

这是一本很棒的介绍性书籍。它还处理嵌套视图和模型：http://addyosmani.github.io/backbone-fundamentals/#working-with-nested-viewshttp://addyosmani.github.io/backbone-fundamentals/#managing-models-in-nested-viewshttp://addyosmani.github.io/backbone-fundamentals/#working-with-nested-models-or-collections