骨干木偶复合视图？

Question

我正在阅读此http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/ 并查看示例。看来我的数据结构适用于此，但我想看看这是否真的应该与复合视图一起使用。

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

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

Derrick Bailey 使用了这样的结构

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

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

Answer 1

您可以通过多种方式为 CompositeView 组织数据。但这就是我对 CompositeViews 的看法，它帮助我决定什么时候使用 CompositeView 和 CollectionView 比较合适。

CollectionView 用于渲染重复的模型列表，每个模型都有相同的表示/模板。

CompositeView 也用于渲染重复的模型列表，但也用于渲染包含列表的视图/模板。

CollectionView：

考虑一个无序列表。你可以在页面上有这个元素：

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

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

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

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

我说的有道理吗？ :-)