Structuring a page with multiple views using backbone.js

Question

I went through various demos, examples, and manuals and still have not found the right / best way to write the following structure:

When I get to a specific route, I would like to display several views inside the views, which drop to 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 separated from each other, as repeated visualization may be required. I looked at the layout manager, nested models, and relational models, but it seems I can't get what I want. Is there a “right” way to create this type of layout and I should use Collections.

Sorry for my misunderstanding. A complete newbie with a rather large ambitious project.

Answer 1

MarionetteJS , the Backbone plugin library, will help you deal with this kind of view attachment.

It provides regions, layouts, CollectionView and ItemView, which are great helpers in your situation.

Here is a really nice tutorial part2