骨干藏品重新presenting树数据 [英] Backbone collections representing tree data

问题描述

我想在一棵树成骨干收集的形式加载JSON数据。我不能做到这一点。任何人都可以解释我做错了吗？

我的非常简单的模型：

  CTreeDataItem = Backbone.Model.extend（
{
}）;
CTreeDataItems = Backbone.Collection.extend（
{
    型号：CTreeDataItem
}）;
 

和我的负荷attepmt：

  VAR treeJs =
        [
            {ID：tvRoot，标题：根，的CssClass：'根'，
                项目：
                    {ID：TI1，标题：项目1，的CssClass：'项'，
                        项目：
                            {ID：ti11，标题：SubItem11'，的CssClass：子项目}，
                            {ID：ti12，标题：SubItem12'，的CssClass：子项目}]}，
                    {ID：TI2，标题：项目2，的CssClass：'项目'，}，
                    {ID：TI3，标题：项目3，的CssClass：'项'，
                        项目：
                            {ID：ti31，标题：SubItem31'，的CssClass：子项目}，
                            {ID：ti32，标题：SubItem32'，的CssClass：子项目}，
                            {ID：ti33，标题：SubItem33'，的CssClass：子项目}]}]
        }];
    this.TreeData =新CTreeDataItems（）;
    this.TreeData.add（treeJs）;
 

解决方案

请尝试重新$ P $与型号psenting树作为节点，包含每个节点的收藏：

  VAR CTreeDataItem = Backbone.Model.extend（{
    初始化：功能（）{
        如果（Array.isArray（this.get（'项目'）））{
            this.set（{项目：新CTreeDataItemChildren（this.get（'项目'））}）;
        }
    }
}）;//子集
VAR CTreeDataItemChildren = Backbone.Collection.extend（{
    型号：CTreeDataItem
}）;// 创建
VAR treeData =新CTreeDataItemChildren（treeJs）;//访问
treeData.at（0）获得（项目）。在（1）获得（标题）
//返回项目2
 

---

修改2011-05-18：如果您想拼合树并维持每个节点必须在树中的父级的引用：

  //扁平化骨干外树。此外，
//你可以覆盖CTree集合的构造
//提供封装
功能扁平化（的parentID，编曲）{
    变量超出= [];
    对于（VAR I = 0; I＆LT; arr.length;我++）{
        VAR节点=改编[I]
        node.parentID =的parentID;
        out.push（节点）;
        如果（Array.isArray（node.items））
            Array.prototype.push.apply（出，压平（node.id，node.items））;
        删除node.items;
    }
    返回的;
}//删除上述code，将提供筑巢
变种CTreeDataItem = Backbone.Model.extend（{}）;//子集，如前
VAR CTreeDataItemCollection = Backbone.Collection.extend（{
    型号：CTreeDataItem
}）;// 创建
VAR treeData =新CTreeDataItemChildren（压扁（''，treeJs））;//以前一样，但现在还有了的parentIDFK
treeData.at（3）获得（'的parentID'）
//返回TI1
 

希望这是你以后。

I want to load json data in form of a tree into Backbone Collection. I can't do this. Can anyone explain what I'm doing wrong?

My very simple model:

CTreeDataItem = Backbone.Model.extend(
{
});
CTreeDataItems = Backbone.Collection.extend(
{
    model: CTreeDataItem
});

And my load attepmt:

    var treeJs =
        [
            { id: "tvRoot", title: 'Root', cssClass: 'root',
                items: [
                    { id: "ti1", title: 'Item1', cssClass: 'item',
                        items: [
                            { id: "ti11", title: 'SubItem11', cssClass: 'subitem'},
                            { id: "ti12", title: 'SubItem12', cssClass: 'subitem'}]},
                    { id: "ti2", title: 'Item2', cssClass: 'item',},
                    { id: "ti3", title: 'Item3', cssClass: 'item', 
                        items: [
                            { id: "ti31", title: 'SubItem31', cssClass: 'subitem'},
                            { id: "ti32", title: 'SubItem32', cssClass: 'subitem'},
                            { id: "ti33", title: 'SubItem33', cssClass: 'subitem'}]}]
        }];
    this.TreeData = new CTreeDataItems();
    this.TreeData.add(treeJs);

解决方案

Try representing the tree with Model as the node and each node containing a Collection of its child nodes:

var CTreeDataItem = Backbone.Model.extend({
    initialize: function() {
        if (Array.isArray(this.get('items'))) {
            this.set({items: new CTreeDataItemChildren(this.get('items'))});
        }
    }
});

// children collection
var CTreeDataItemChildren = Backbone.Collection.extend({
    model: CTreeDataItem
});

// create
var treeData = new CTreeDataItemChildren(treeJs);

// access
treeData.at(0).get('items').at(1).get('title')
// returns "Item2"

---

EDIT 2011-05-18: If you want to flatten the tree and maintain a reference to the parent that each node had in the tree:

// flatten the tree outside of Backbone. Alternatively,
// you could override the constructor of the CTree collection
// to provide encapsulation
function flatten(parentID, arr) {
    var out = [];
    for (var i = 0; i < arr.length; i++) {
        var node = arr[i];
        node.parentID = parentID;
        out.push(node);
        if (Array.isArray(node.items))
            Array.prototype.push.apply(out, flatten(node.id, node.items));
        delete node.items;
    }
    return out;
}

// remove above code that would have provided nesting
var CTreeDataItem = Backbone.Model.extend({});

// children collection, as before 
var CTreeDataItemCollection = Backbone.Collection.extend({
    model: CTreeDataItem
});

// create
var treeData = new CTreeDataItemChildren(flatten('', treeJs));

// as before, but now there's the 'parentID' FK
treeData.at(3).get('parentID')
// returns "ti1"

Hope that's what you're after.

这篇关于骨干藏品重新presenting树数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！