Question

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

我无法在线查找案例，其中某人在backbone.js中具有相同数据类型的任意深层次结构。我只是让我的模型类包含我的集合类的实例吗？如何实现储蓄？我知道这是一个广泛的问题，但我主要需要一些关于如何处理这个问题的一般性建议（或者更好的是，我还没看过的样本）。

Answer 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);

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

PS。如果你指出正确的parent_id，添加/保存项目不会有问题。

Answer 2

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

Backbone with a tree view widget

您可以通过多种方式创建分层树。其中一个我在我的问题中发布。如果你想，试试吧！我使用Backbone.js和Epoxy.js来创建它。链接到Epoxy.js

http://epoxyjs.org/index.html

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

Backbone.js和层次结构/树

2 个答案: