模块化JS组件授权模式

我正在研究将大型UI组件分解为更小的部分，但有一点我不完全确定如何处理，而我似乎无法找到一般信息的东西是从子组件中委派事件。例如，如果您有待办事项列表并单击待办事项列表，则会更新侧边栏并提供有关待办事项的详细信息。现在我们所拥有的代码基本上是一个带有模板的文件，并且可以处理所有事件。当您单击附加到列表和边栏的包装的委托处理程序时，它会在DOM节点中搜索数据。有数千个可点击的行。模块化JS组件授权模式

我想要的东西而不是沿着这样的线（这仅仅是伪代码）：

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都有一个点击事件。

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

这种类型的东西是否还有其他示例或模式？

来源

2013-10-12 Oscar Godson

可以监视列表的点击，并抓住从的listItem（event.target）的ID或其他标识符。这样，你不需要绑定项目上的任何事件，只需注入由模板和数据制作的html。 – dandavis

@dandavis事情是，我想保留LisItem事件的一部分，因为它们的语义是theyre listItem事件。授权是一个实现细节。如果我在itemList中设置所有处理程序，那么即使将它作为另一个组件，也没有什么收获。如果我误解了你能给我一个例子吗？ –

您可以将事件与listItems捆绑在一起。关键是使用所有项目的一种方法，从列表或DOM中注入/获取它们可能需要的任何依赖项。这可以是添加到每个元素上的非事件js属性，或者只是使用HTML标记来将项目标识到项目的方法。所以，它可能是像itemList.onclick = Items.doItemAction（e.target.itemID，this）的东西...在这种情况下，是的，你有列表上的AN事件，但行动是所有在其他地方定义的项目方法，可能在物品制造商旁边。 – dandavis

您是否尝试过使用客户端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

来源

2013-10-12 01:19:43 kol

主干没有子视图或子组件的概念。如果是这样，你能指出在代码中处理的位置吗？和Backbone一样好（我喜欢它），我正在使用已经使用多年并且在Backbone存在之前的自制MVC客户端。它可以正常工作，对于诸如只是委托事件的事情，我不想为这个特定问题重写10几千行的代码:)我只是在这个时候寻找模式。 –

在我提到的书中，有处理子视图的“骨干设计模式”（嵌套视图;请参阅上面的链接）。这个例子也可能会给你一些想法：http：// todomvc。com/architecture-examples/backbone/ – kol

您提供的todomvc链接不会执行它看起来像的委派事件。它只是在所有'.toggle'元素上设置一个点击事件。我会读一些你发布的骨干链接。 –

模块化JS组件授权模式

回答

相关问题