0

我的目标是解耦的 UI 架构。我希望轮播和分页组件彼此分开；但分页能够监听“uiCarouselMoved”事件的变化。

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

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

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

4

2 回答 2

4

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

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

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

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

于 2013-11-23T11:01:05.783 回答
1

我会将 pagination 和 carousel分别设为mixins、 with_carousel 和 with_pagination ，而不是单独的组件。这将允许您在同一个组件中使用两者，并将该组件附加到新的外层 dom 节点。这将允许您在本地侦听 uiCarouselMoved 事件，而不是将侦听器附加到文档。

一个例子在这里：http: //jsbin.com/iZeLABAW/1/edit

于 2013-11-23T05:31:42.100 回答