Backbone.js和层次结构/树
我正在研究一个需要表单的应用程序,该表单允许用户管理产品类别的层次结构,以达到任意深度。我可以很容易地将数据获取到页面上,但是我为了使这种事情与backbone.js一起工作需要做些什么而有点失落。基本上,我正在寻找嵌套的UL。当用户选择一个时,我希望他们能够编辑/删除类别或在其下添加其他类别。Backbone.js和层次结构/树
我很难在网上找到有人在backbone.js中拥有相同数据类型的任意深层次结构的情况。我只是让我的模型类包含我的集合类的一个实例?如何完成储蓄?我知道这是一个广泛的问题,但我主要需要一些关于如何解决这个问题的一般性建议(或者更好的是,我还没有看过一个示例)。
您可以将树建模为具有父子链接的项目集合。所以你的模型应该是这样的:
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,则添加/保存项目不会成为问题。
伟大的解决方案,谢谢! – Casey
你可以在这个链接找到答案。
Backbone with a tree view widget
你有很多方法来创建分层树。其中之一,我张贴在我的问题。如果你想,试试吧!我使用Backbone.js和Epoxy.js来创建它。 链接Epoxy.js
该库提供您轻松绑定不同的事件包含什么树
叶元素是产品本身? – papdel
我没有想过这样做,但现在你提到它,它会使界面更加可用。我现在只是试图去管理类别层次结构。 –