Question

我正在考虑将大型UI组件分解成更小的部分，但有一点我不完全确定如何处理，而我似乎找不到一般信息的东西是从子组件委派事件。

让我们假设，例如，您有一个待办事项列表并单击待办事项列表将更新侧边栏，其中包含有关待办事项的详细信息。现在我们的代码基本上是一个带有模板的文件，并为所有事件做所有事件。当您单击附加到列表和侧栏的包装器的委托处理程序时，它会在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次点击事件。

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

此类事物还有其他示例或模式吗？

Answer 1

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

Here是一本很棒的入门书。它也处理嵌套的视图和模型： http://addyosmani.github.io/backbone-fundamentals/#working-with-nested-views http://addyosmani.github.io/backbone-fundamentals/#managing-models-in-nested-views http://addyosmani.github.io/backbone-fundamentals/#working-with-nested-models-or-collections

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

1 个答案: