0

I'm aiming for a decoupled UI architecture. I want the carousel and pagination components to be separate from each other; but with the pagination able to listen for changes on a uiCarouselMoved event.

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

The problem arises when I have two instances of carousels and pagination respectively. I'd like to be aware of the best design pattern within Twitter Flight to handle a 'bridge' between the Carousel and the Pagination components, without relying on irrelevant logic such as DOM tree structure, and preferably no hard-coded IDs.

So, is it possible to know which pagination to updated, based on the source carousel?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
joecritch
  • 1,095
  • 2
  • 10
  • 25

2 Answers2

4

Creating a pagination mixin and mixing it in to the carousel would seem to make sense.

Another option is to use the DOM to provide structure. By attaching an instance of pagination and carousel to the same DOM node or tree, you create a non-declarative relationship between the two.

Alternatively, generate a unique ID (using, for example, _.uniqueId http://underscorejs.org/#uniqueId) and pass that with the data from the carousel. This can also be included in the response, allowing components to determine if they are interested in global events.

TweetDeck uses all three of these methods in various instances. Using the DOM for structure requires no extra boilerplate, though it is also the most implicit relationship. Using IDs is very specific but requires extra boilerplate in event triggers and handlers. Using a mixin requires no boilerplate and is very specific but does create a dependency, which you may want to avoid.

Tom Hamshere
  • 502
  • 5
  • 11
  • Thank you for your comprehensive answer Tom! I've marked Ryan's as correct because the example provided seems to fit nicely. I understand the issues with dependencies, though. – joecritch Nov 23 '13 at 23:52
  • Hi Tom. Can you show an example of the second case? (how to use the DOM to provide structure) – Vadim S May 12 '15 at 06:25
1

I would make pagination and carousel both mixins, with_carousel and with_pagination respectively, instead of individual components. This will allow you to use both within the same component, and attach that component to a new outer level dom node. This will allow you to listen for the uiCarouselMoved event locally instead of attaching the listener to the document.

An example is here: http://jsbin.com/iZeLABAW/1/edit

Ryan O'Neill
  • 3,727
  • 22
  • 27
  • I should have actually named the functions withCarousel and withPagination per convention. The files would be named with_carousel.js and with_pagination.js. – Ryan O'Neill Nov 23 '13 at 05:41
  • Thank you Ryan, I like this solution. Props for the example too. – joecritch Nov 23 '13 at 23:53
  • This is a nice example. One suggestion: You could remove the `each` in `this.changeCurrentIndicator` and change it's body to a shorter version: `this.select('indicators').removeClass(this.attr.currentClass).eq(data.index).addClass(this.attr.currentClass);` – Rudi Jun 04 '15 at 06:50