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 回答