I’ve been dabbling with Chaplin.js recently, a javascript MVC framework built upon Backbone.js. I’ve used Backbone.js in the past, and found it lacking convention on how to structure your app. Chaplin.js adds sensible structure and convenient ways to avoid common pitfalls in Backbone.js, like memory leaks. This post also highlights some Chaplin.js/Backbone.js code to give you an small sample of how models, collections, views, collectionviews, templates interact.

I recently had a frustrating bug which I solved by tracing through chaplin.js for hours. Granted, the solution was in the docs all along, but sequentially reading every documented method is a tiring and often rushed process. I probably should have asked StackOverflow, found an IRC channel, or posted an issue on github, but alas. So if you’re coming from Google, hopefully this post saves you some time.

So here was the problem: I wanted to add a collection’s child view into a certain DOM element from the template of the CollectionView. The child view had autoAttach and autoRender set to true. I thought the appropriate options to use were container and containerMethod, but child views just weren’t be added in the right place. After some tracing, I realized I needed to look at the insertView method, which led to the listSelector option, which is clearly what I needed.

Wrong way (uses the container option in a child view):

Correct way (uses the listSelector option in the collection view):

tl;dr use listSelector to define the DOM element where child Views are inserted in a CollectionView, not the container option