2

我正在考虑将大型 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 个点击事件。

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

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

4

1 回答 1

0

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

这是一本很棒的入门书。它也处理嵌套视图和模型：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

于 2013-10-12T01:19:43.237 回答