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呈现一系列分支＆＃39;进入一棵现有的树＆＃39;节点。空树节点完全有效，除非其中有项目，否则无法显示。现在让我们看一下CompositeView。

<强> CompositeView中：

让我们说你有一张桌子。如果您使用了CollectionView，则必须在页面上添加带有页眉，页脚等的空表。这将是＆＃39;树＆＃39;节点。然后，集合将是表的每一行。这样做的问题是，如果渲染视图有任何问题，那么树节点仍然在页面上。此外，树节点必须是硬编码的，因为它不是视图的一部分。

现在，如果你使用了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的最终渲染输出包括表（＆＃39;树＆＃39;节点）以及行（＆＃39;分支＆＃39;节点）。在一个视图中，这两个元素在逻辑上属于一起。这就是CompositeView的目的。此外，由于它们是同一视图的一部分，因此树视图可以轻松访问视图的数据。在我的视图中，我给CompositeView一个模型以及一个Collection。模型包含标量值，例如表格中的页数等。

我有任何意义吗？： - ）

骨干牵线木偶复合视图？

1 个答案: