Backbone.js 和层次结构/树答案

【问题标题】：Backbone.js and hierarchies/treesBackbone.js 和层次结构/树
【发布时间】：2011-10-07 03:39:12
【问题描述】：

我正在开发一个应用程序，它需要一种允许用户管理任意深度的产品类别层次结构的表单。我可以很容易地将数据放到页面上，但我有点迷失了我需要做什么才能使这样的事情与backbone.js一起工作。基本上，我正在寻找嵌套的 UL。当用户选择一个时，我希望他们能够编辑/删除该类别或在其下添加另一个类别。

我无法在线查找某些案例，其中某人在骨干网.js 中具有相同数据类型的任意深度层次结构。我会让我的模型类包含我的集合类的一个实例吗？储蓄将如何实现？我知道这是一个有点宽泛的问题，但我主要需要一些关于如何解决这个问题的一般性建议（或者更好的是，我没有看过的某个地方的示例）。

【问题讨论】：

叶子元素本身就是产品？
我没有想过这样做，但现在你提到它，它会使界面更加有用。目前我只是想获得一些东西来管理类别层次结构。

标签： backbone.js

【解决方案1】：

您可以将树建模为具有父子链接的项目集合。所以你的模型应该是这样的：

      id:           id,
      parent_id:    parent_id

然后使用 JS 中的递归函数调用从集合中构建一棵树。这是一段实时代码：

 function buildTree(branch, list) {
  //recursively builds tree from list with parent-child dependencies
  if (typeof branch == 'undefined') return null;
  var tree = [];
  for(var i=0; i<branch.length; i++)      
    tree.push( {
      item: branch[i],
      children: buildTree( list[ branch[i].id ], list)
    });
  return tree;
}

在使用underscore.js（无论如何这是backbone.js的先决条件）通过parent_id调用功能组项目之前，然后调用：

  var list = _.groupBy(arrayOfItems,'parent_id');
  var tree = buildTree(list[0],list);

最后，再次使用递归函数调用渲染树（这里没有示例，但我相信你明白了）。

附言。如果您指定正确的 parent_id，添加/保存项目应该不是问题。

【讨论】：

【解决方案2】：

您可以在此链接上找到答案。

Backbone with a tree view widget

您有很多方法可以创建分层树。其中一个是我在我的问题中发布的。如果你愿意，试试吧！我使用 Backbone.js 和 Epoxy.js 来创建它。链接到 Epoxy.js

http://epoxyjs.org/index.html

这个库让您可以轻松绑定包含树的不同事件

【讨论】：