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

Question

我的目标是建立一个解耦的 UI 架构。我希望轮播和分页组件彼此分开；但分页能够监听 uiCarouselMoved 事件的更改。

示例:http://jsbin.com/uQadehI/1/edit?html,js,output

当我分别有两个轮播和分页实例时，就会出现问题。我想了解 Twitter Flight 中处理轮播和​​分页组件之间“桥梁”的最佳设计模式，而不依赖于不相关的逻辑(例如 DOM 树结构)，并且最好没有硬编码 ID。

那么，是否可以根据源轮播知道要更新哪个分页？

Answer 1

创建一个分页混合并将其混合到轮播中似乎很有意义。

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

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

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