处理Twitter Flight组件的多个实例的事件

Handling events for multiple instances of Twitter Flight components

本文关键字：实例事件处理 Flight 组件 Twitter 更新时间：2023-09-26

我的目标是一个解耦的UI架构。我希望转盘和分页组件彼此分离；但是分页能够监听CCD_ 1事件上的改变。

示例：http://jsbin.com/uQadehI/1/edit?html，js，输出

当我分别有两个转盘和分页的实例时，问题就出现了。我想知道Twitter Flight中的最佳设计模式，以处理Carousel和Pagination组件之间的"桥梁"，而不依赖于DOM树结构等无关逻辑，最好没有硬编码的ID。

那么，有可能知道根据源转盘更新哪个分页吗？

创建一个分页混合并将其混合到转盘中似乎是有意义的。

另一种选择是使用DOM来提供结构。通过将分页和旋转木马的实例附加到同一DOM节点或树，可以在两者之间创建非声明性关系。

或者，生成一个唯一的ID（例如，使用_.uniqueIdhttp://underscorejs.org/#uniqueId)并将其与转盘中的数据一起传递。这也可以包含在响应中，允许组件确定是否对全局事件感兴趣。

TweetDeck在各种情况下使用这三种方法。使用DOM进行结构不需要额外的样板，尽管它也是最隐含的关系。使用ID是非常具体的，但在事件触发器和处理程序中需要额外的样板。使用mixin不需要样板文件，而且非常具体，但确实会产生依赖关系，您可能希望避免这种依赖关系。

我会将分页和carousel分别与_causel和_pagination混合，而不是单独的组件。这将允许您在同一组件中使用这两个组件，并将该组件连接到新的外部级别dom节点。这将允许您在本地侦听uiCarouselMoved事件，而不是将侦听器附加到文档。

示例如下：http://jsbin.com/iZeLABAW/1/edit