Skip to content

Instantly share code, notes, and snippets.

@naganowl
Last active December 22, 2015 23:09
Show Gist options
  • Save naganowl/6544520 to your computer and use it in GitHub Desktop.
Save naganowl/6544520 to your computer and use it in GitHub Desktop.
Chaplin collection views depending on multiple collections

Long story short, Chaplin CollectionView is made for a single collection and having it's item views depend on info on other collections is painful.

There are two ways to go about handling this

  1. Blocking display of the item views until all the collections are available.
  2. Progressively enhancing the state of the item views.

While (1) is ideal, executing it is cumbersome because it involves deferring the add of the item views (Via a shadow collection or some other method) and stubbing out the fallbackSelector to prevent the main view from displaying

loadingSelector -> fallbackSelector -> Actual item views

since the item views will be created and added on sync of the main collection (Due to addCollctionListeners). This entails a lot of fighting with the framework.

The latter problem above seems to be solvable by stubbing out the [init|toggle]loadingIndicator methods, but that won't stop the item views from being added on collection sync, thus you will end up with your loading selector alongside the item views!

With (2), we can embrace what's happening with the framework and enhance the item views by providing default states/values when the dependent collections are not present and re-render them when they arrive (Through listening to the sync events or leveraging promises and rendering when it's done). Also, the render has to be on each individual activity item since re-rendering the collection view once it's item views have been added, won't render those item views.

The downside with (2) is that with a sufficiently large number of item views, the rendering of each item may incur a performance hit due to repaints, but if the initial set of items displayed is small (And additional items can be requested via a link for instance) there shouldn't be a problem since the core issue is just having the dependent collection available when the first set of item views is displayed.

Another issue with (2) can be potential flickering that can happen as the item views receive the dependent collections and re-render (If you have multiple collections and have the item views re-render when each additional collection arrives). However, I feel that it's best to communicate information as soon as you get it and not make the user wait longer than needed. Of course, there are always exceptions. Also, you can wrap each of the collections together in a promise and do a single render when they all arrive.

Hopefully there isn't anything I overlooked as I'd like to implement (1) without too much hacking around, but (2) doesn't seem so bad after all since it allows conveying the information we have as we get it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment