带有树视图小部件的主干答案

【问题标题】：Backbone with a tree view widget带有树视图小部件的主干
【发布时间】：2011-09-03 06:28:56
【问题描述】：

我正在评估 Backbone javascript framework 以用于将在树视图小部件中显示分层模型的项目（想想 Windows 文件浏览器）。

我喜欢 Backbone 对世界的看法。但是，在我得到一个概念证明之前，涉及到很多编码，Backbone 实际上从服务器接收分层模型并更新树小部件。我已经看到representing deep data structures with Backbone 有各种解决方案，但我想知道......有没有人真的这样做过？

只要知道这是可能的就会有所帮助。实际上，在 Backbone 中命名树视图 UI 组件和用于使数据分层的指针会更好。一些示例代码会非常棒。

就数据大小而言，树将运行 100 个节点（文件夹）和 1000 个叶项（文档），并且逐步加载数据会很好（例如，当用户单击时，一次一个文件夹in)，尽管这可能不是什么大事。

谢谢！

【问题讨论】：

好吧，我问了关于深度数据结构的问题，我可以说 Backbone-Relational 确实做到了它所说的那样，并且我已经创建了存在的关系。另外，我应该补充一点，对于所有节点都相同的关系结构，我在客户端将结构展平，并在侧面使用链表来维护树状结构。所以是的，这是可能的。我要补充一点，在大约 10,000 个项目中，Firefox 2 确实陷入了困境。 Chrome 是高性能的。
感谢您的信息。你会再走那条路，还是会使用原生支持层次结构的系统？
这取决于服务器提供的内容。在所描述的情况下，服务器没有在服务器端提供搜索和过滤，因此所有内容都需要在客户端上。通过创建过滤集合然后遍历节点结构，我能够以合理的性能方式显示内容。如果服务器能够提供过滤集合，我会选择基于关系的解决方案。
我在这些方面做了一些事情......大约 4 层深度相对平衡的树。但是要知道我是否可以做出贡献，我需要知道您的数据在后端是如何组织的？关系，键/值以及返回的方式/内容，json/xml？此外，当您说分层填充模型时，您的意思是 Backbone.Model 或 Backbone.Collection 还是抽象概念意义上的模型？您是否只需要从服务器填充或“也”将其同步回来（即，它是“一旦加载完成”类型？）如果您可以使用其中一些信息更新您的问题，那就太好了...
Nupul：数据是相关的，但可能会转移到 Mongo。可以使用 json、XML 或任何其他方便的方式将其发送到浏览器。我的意思是专门填充 Backbone.Model 和 Collection。我需要双向同步：这就是人们首先使用 Backbone 的原因，对吧？

标签： hierarchical-data backbone.js

【解决方案1】：

如果您不想沿着分层数据集路径移动，一个选项是使用嵌套集 (http://en.wikipedia.org/wiki/Nested_set_model)。这允许您将整个集合存储在单个数组（或列表或您想要调用的任何内容）中，并使用“左”和“右”值来确定列表的结构和层次结构。

如果我没记错的话，这种技术最初是为了优化关系数据库中的数据存储和查询而构建的。但是，我在 C#/Winforms 应用程序中多次使用它，以避免数据的递归层次结构，并且效果很好。

在 javascript 中实现这一点应该很容易，但我不知道它对大列表的执行情况如何。

【讨论】：

【解决方案2】：

好问题，是的，我以前做过这个

自 (http://backbonerelational.org/) 2013 年以来，我一直在使用骨干关系，它对我来说效果很好。

我的场景和你的类似，我有一个复杂的 JSON 文件，里面有很多集合和集合。

使用此插件，您可以执行以下操作：

有一个关系定义数组。这意味着您可以定义一个集合/模型树。更多在这里（http://backbonerelational.org/#RelationalModel-relations）
指定关系的类型，例如：某些集合可能有一个或多个对关系类型的引用。

类产品扩展 Backbone.RelationalModel //只是一个例子。

relations: [
    {
        type : Backbone.Many
        key : 'the name of model or collection'
    }

阅读文档。效果很好。

另一个帮助我实现的好插件是 Model Binder (https://github.com/theironcook/Backbone.ModelBinder) 它有助于将视图与模型绑定。

我对这些插件没问题，一切正常。

希望对你有帮助。

【讨论】：

【解决方案3】：

也许您会在此页面上找到答案。我尝试在 Backbone.js 和 Epoxy.js 上编写分层树 https://stackoverflow.com/questions/20639550/backbone-epoxy-js-and-hierarchies-trees

看起来像这样：

顶级1
- 2 级，项目 1
  - 3 级，项目 1
  - 3 级，第 2 项
  - 3 级，第 3 项
- 2 级，项目 2
  - 3 级，第 4 项
  - 3 级，项目 5
    - 4 级，第 1 项
    - 4 级，第 2 项
    - 4 级，第 3 项
  - 3 级，第 6 项
顶级2
- 2 级，项目 3
  - 3 级，第 7 项
  - 3 级，第 8 项
  - 3 级，第 9 项
- 2 级，项目 4
  - 3 级，项目 10
  - 3 级，项目 11
  - 第三级，项目 12

【讨论】：