gpt4 book ai didi

javascript - 模块化 JS 组件中的委托(delegate)模式

转载 作者:行者123 更新时间:2023-11-30 06:28:47 24 4
gpt4 key购买 nike

我正在考虑将大型 UI 组件分解成更小的部分,但有一件事我不太确定如何处理,而且我似乎无法找到关于从子组件委托(delegate)事件的一般信息。

比方说,您有一个待办事项列表,单击待办事项列表会更新侧边栏,其中包含待办事项的详细信息。现在我们拥有的代码基本上是 1 个带有模板的文件,并为所有事件执行所有事件。当您单击附加到列表和侧边栏包装器的委托(delegate)处理程序时,它会在 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 需要将其事件委托(delegate)给 todoList 或更高级别。我不希望每个 todoItem 都有 1 个点击事件。

我唯一的想法是在父级采用(如果支持)并从中创建事件的子组件上有一个“委托(delegate)”属性。它会有事件和处理程序的散列。如果事件处理程序已经附加,它会简单地忽略它。

是否有此类事物的其他示例或模式?

最佳答案

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

Here是一本很棒的入门书。它也处理嵌套的 View 和模型: 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

关于javascript - 模块化 JS 组件中的委托(delegate)模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19329369/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com