Structuring a page with multiple views with backbone.js

Question

I've gone through various demos, examples and tutorials and still haven't find the right/best way to write the following structure:

When I get to a certain route I would like to render multiple views inside views that go down through three levels. So my basic structure would be like this -

• Container
  • Article
    • Section
      • Component
      • Component
    • Section
      • Component
    • Section
      • Component
    • Section
      • Component
      • Component
  • Article
    • Section
      • Component
      • Component
    • Section
      • Component
    • Section
      • Component
      • Component
  • Article
    • Section
      • Component
    • Section
      • Component
      • Component
  • Article
    • Section
      • Component
      • Component
    • Section
      • Component
      • Component
    • Section
      • Component
    • Section
      • Component
      • Component

Each view/model must be separate from each other as they may need to re-render. I've looked at layout manager, nestedModels and relationalModels but can't seem to get what I want. Is there a "right" way to create this type of layout and should I be using Collections.

Sorry for my lack of understanding. A complete newbie with a rather large ambitious project.

Answer 1

MarionetteJS, a plugin library for Backbone, will help you handling this kind of view nesting.

It provides Regions, Layout, CollectionView and ItemView that are great helpers in your situation.

Here is a really nice tutorial, part2