Backbone marionette composite view?

Question

I am reading this http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/ and looking at the examples. It seems my data structure applies to this, but I want to see if this really should be used with a composite view.

I have a data structure on a model that looks like this.

var myModel1 = {
    _id: 798698,
    username: "John",
    message: {
        message1: {message: "Some cool messsage", sent: "3/22/2014 12:20"},
        message2: {message: "I'm mad Ohio State lost", sent: "3/22/2014 12:21"}
    }
}

var myModel2 = {
    _id: 856798,
    username: "Rick",
    message: {
        message1: {message: "Another message", sent: "3/22/2014 1:20"},
        message2: {message: "March madness!", sent: "3/22/2014 1:21"}
    }
}

Which in a collection would look more like this

[
    {
        _id: 798698,
        username: "John",
        message: {
            message1: {message: "Some cool messsage", sent: "3/22/2014 12:20"},
            message2: {message: "I'm mad Ohio State lost", sent: "3/22/2014 12:21"}
        }
    },

    {
        _id: 856798,
        username: "Rick",
        message: {
            message1: {message: "Another message", sent: "3/22/2014 1:20"},
            message2: {message: "March madness!", sent: "3/22/2014 1:21"}
        }
    }
]

Derrick Bailey uses a structure like this

treeData = [
  {
    nodeName: "top level 1",
    nodes: [
      {
        nodeName: "2nd level, item 1",
        nodes: [
          { nodeName: "3rd level, item 1" },
          { nodeName: "3rd level, item 2" },
          { nodeName: "3rd level, item 3" }
        ]
      },
      {
        nodeName: "2nd level, item 2",
        nodes: [
          { nodeName: "3rd level, item 4" },
          { 
              nodeName: "3rd level, item 5",
              nodes: [
                  { nodeName: "4th level, item 1" },
                  { nodeName: "4th level, item 2" },
                  { nodeName: "4th level, item 3" }
              ]
          },
          { nodeName: "3rd level, item 6" }
        ]
      }
    ]
  },
  {
    nodeName: "top level 2",
    nodes: [
      {
        nodeName: "2nd level, item 3",
        nodes: [
          { nodeName: "3rd level, item 7" },
          { nodeName: "3rd level, item 8" },
          { nodeName: "3rd level, item 9" }
        ]
      },
      {
        nodeName: "2nd level, item 4",
        nodes: [
          { nodeName: "3rd level, item 10" },
          { nodeName: "3rd level, item 11" },
          { nodeName: "3rd level, item 12" }
        ]
      }
    ]
  }

];

So that makes me think should I structure my data like this?

userData = {
    users: [
        {
            userName: "John",
            _id: 798698,
            messages: [
                {message: "Some cool messsage", sent: "3/22/2014 12:20"},
                {message: "I'm mad Ohio State lost", sent: "3/22/2014 12:21"}
            ]
        },
        {
            userName: "Rick",
            _id: 856798,
            messages: [
                {message: "Another message", sent: "3/22/2014 1:20"},
                {message: "March madness!", sent: "3/22/2014 1:21"}
            ]
        }
    ]
}

My question is should I follow the above data structure and continue to read about the composite view, or is the composite view for something entirely different?

Answer 1

There are a dozen ways you could organize your data for a CompositeView. But this is how I think about CompositeViews, and it has helped me to decide when is the appropriate time to use CompositeView vs CollectionView.

A CollectionView is for rendering a repeating list of models, each of which has the same representation/template.

A CompositeView is for rendering a repeating list of models as well, but also to render some view/template which wraps the list.

CollectionView:

Consider an unordered list. You could have this element on the page:

<ul id="my-list"></ul>

And render a CollectionView into that node where each item in the collection is rendered as:

<li>One Title of Collection Item</li>

The result would be:

<ul id="my-list">
    <li>Title of One Collection Item</li>
    <li>Title of Another Collection Item</li>
    <li>Title of Last Collection Item</li>
</ul>

Simple, right? The CollectionView renders a series of 'branches' into an existing 'tree' node. The empty tree node is perfectly valid and won't be visible unless there are items in it, anyway. Now let's look at CompositeView.

CompositeView:

Let's say you have a table. If you used CollectionView, you would have to have the empty table with headers, footers, etc. already on the page. This would be the 'tree' node. Then, the collection would be each row of the table. The problem with this is that, if there's any problem rendering the view, then the tree node would still be on the page. Additionally, the tree node must be hard-coded as it's not part of the view.

Now, if you used CompositeView, you would only need some wrapper element to hold your view:

<div id="table_view_wrapper"></div>

Then, your CompositeView itself specifies a template. This is where it differs from a CollectionView:

<table id="my_table">
    <thead>
        <tr><th>Column 1</th></tr>
        <tr><th>Column 2</th></tr>
        <tr><th>Column 3</th></tr>
    </thead>
    <tbody>
    </tbody>
</table>

And then each item has an ItemView/template like:

<tr>
    <td>Value 1</td>
    <td>Value 2</td>
    <td>Value 3</td>
</tr>

The final rendered output of the CompositeView includes both the table (the 'tree' node) as well as the rows (the 'branch' nodes). Both of those elements logically belong together, in one view. That is the purpose of the CompositeView. Additionally, because they are part of the same view, the tree view has easy access to the view's data. In my views, I give the CompositeView a Model as well as a Collection. The Model holds scalar values such as the number of pages in the table, etc.

Did I make any sense at all? :-)