Backbone.js 和层次结构/树

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

最后，再次使用递归函数调用渲染树(此处没有示例，但我相信您明白了)。

附注。如果您指出正确的 parent_id，添加/保存项目应该不会成为问题。