Backbone.js 主干木偶复合视图？

我正在读这篇文章，并看一些例子。我的数据结构似乎适用于此，但我想看看这是否真的应该用于复合视图

我有一个模型上的数据结构，看起来像这样

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"}
    }
}

在一个集合中哪个看起来更像这样

[
    {
        _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"}
        }
    }
]

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" }
        ]
      }
    ]
  }

];

Derrick Bailey使用这样的结构

[
    {
        _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"}
        }
    }
]

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" }
        ]
      }
    ]
  }

];

所以我想我应该这样构造我的数据吗

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"}
            ]
        }
    ]
}

---

我的问题是，我应该遵循上面的数据结构，继续阅读关于复合视图的内容，还是复合视图的内容完全不同？

有十几种方法可以为复合视图组织数据。但这就是我对CompositeView的看法，它帮助我决定何时是使用CompositeView vs CollectionView的合适时机

CollectionView用于呈现模型的重复列表，每个模型都具有相同的表示/模板

CompositeView也用于呈现模型的重复列表，但也用于呈现一些包装列表的视图/模板

收藏视图：

考虑一个无序的列表。您可以在页面上显示此元素：

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

并将CollectionView渲染到该节点中，其中集合中的每个项目渲染为：

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

收藏项目的一个标题

结果将是：

<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>

一个收藏项目的标题
其他收藏项目的标题
最后一件收藏品的名称

很简单，对吧？CollectionView将一系列“分支”渲染到现有的“树”节点中。空树节点是完全有效的，除非其中有项目，否则不会可见。现在让我们看一下CompositeView

复合视图：

假设你有一张桌子。如果使用CollectionView，则页面上必须已经有带有页眉、页脚等的空表。这将是“树”节点。然后，集合将是表的每一行。问题是，如果呈现视图时出现任何问题，那么树节点仍将位于页面上。此外，树节点必须硬编码，因为它不是视图的一部分

现在，如果使用CompositeView，则只需要一些包装器元素来保存视图：

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

然后，CompositeView本身指定一个模板。这就是它与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>

第1栏
第2栏
第3栏

然后每个项目都有一个ItemView/模板，如：

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

值1
价值2
价值3

CompositeView的最终渲染输出包括表（“树”节点）和行（“分支”节点）。在一个视图中，这两个元素在逻辑上属于一个整体。这就是CompositeView的目的。此外，由于它们是同一视图的一部分，因此树视图可以轻松访问视图的数据。在我的视图中，我为CompositeView提供了一个模型和一个集合。该模型保存标量值，如表中的页数等

---

我说得有道理吗？：-）

有十几种方法可以组织数据进行合成视图。但这就是我对CompositeView的看法，它帮助我决定何时是使用CompositeView vs CollectionView的合适时机

CollectionView用于呈现模型的重复列表，每个模型都具有相同的表示/模板

CompositeView也用于呈现模型的重复列表，但也用于呈现一些包装列表的视图/模板

收藏视图：

考虑一个无序的列表。您可以在页面上显示此元素：

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

并将CollectionView渲染到该节点中，其中集合中的每个项目渲染为：

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

收藏项目的一个标题

结果将是：

<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>

一个收藏项目的标题
其他收藏项目的标题
最后一件收藏品的名称

很简单，对吧？CollectionView将一系列“分支”渲染到现有的“树”节点中。空树节点是完全有效的，除非其中有项目，否则不会可见。现在让我们看一下CompositeView

复合视图：

假设你有一张桌子。如果使用CollectionView，则页面上必须已经有带有页眉、页脚等的空表。这将是“树”节点。然后，集合将是表的每一行。问题是，如果呈现视图时出现任何问题，那么树节点仍将位于页面上。此外，树节点必须硬编码，因为它不是视图的一部分

现在，如果使用CompositeView，则只需要一些包装器元素来保存视图：

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

然后，CompositeView本身指定一个模板。这就是它与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>

第1栏
第2栏
第3栏

然后每个项目都有一个ItemView/模板，如：

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

值1
价值2
价值3

CompositeView的最终渲染输出包括表（“树”节点）和行（“分支”节点）。在一个视图中，这两个元素在逻辑上属于一个整体。这就是CompositeView的目的。此外，由于它们是同一视图的一部分，因此树视图可以轻松访问视图的数据。在我的视图中，我为CompositeView提供了一个模型和一个集合。该模型保存标量值，如表中的页数等

---

我说得有道理吗？：-）

哇，谢谢你的简化，很好的解释。我还在想办法