javascript - ember.js rest JSON 递归嵌套在同一个模型中

Question

下面是我从 REST 端点获取的 JSON 示例。我需要从 subcategories 数组创建一个树状结构，如您所见，它是递归嵌套的。

我搜索并尝试了将近一个星期，但无法提出一个完全可行的解决方案——到目前为止我得到的最好的解决方案是子类别既作为其父子类别的子类别出现(根据需要)，但也作为普通的顶级节点，我显然不想要。

我的问题很简单:我该如何建模，以便 ember.js 能够创建所需的树状结构？

我认为这对于有经验的 ember 用户来说并不难，但是像往常一样，ember 的文档既不是最新的，也没有涵盖比琐碎的概念更多的内容。

无论我在哪里看，这种嵌套结构的概念似乎都是陌生的(我发现的所有嵌套都是不同类型的，但这正是我不需要的)。 JSON 格式是不可变的，我必须按原样使用它。

我创建了我的项目- Ember 客户端 0.2.7- ember.js 1.13.0- Ember 数据 1.13.4使用 DS.RESTAdapter 和 DS.RESTSerializer

{
"id": 28,
"hassubcategories": true,
"CategoryName": "By Asset Type",
"subcategories": [
    {
        "id": 29,
        "CategoryName": "Images",
        "hassubcategories": true,
        "subcategories": [
            {
                "id": 30,
                "CategoryName": "Illustrations",
                "hassubcategories": false
            },
            {
                "id": 31,
                "CategoryName": "Pictures",
                "hassubcategories": true,
                "subcategories": [
                    {
                        "id": 61,
                        "CategoryName": "BMP",
                        "hassubcategories": false
                    },
                    {
                        "id": 32,
                        "CategoryName": "EPS",
                        "hassubcategories": false
                    }
                ]
            }
        ]
    },
    {
        "id": 73,
        "CategoryName": "InDesign  (related)",
        "hassubcategories": false
    }
]

这应该在模板中呈现为树状列表图片- 插图-- 骨形态发生蛋白-- 每股 yield Indesign(相关)

感谢您的帮助。

编辑 2015-07-17:我仍然没有接近动态解决方案，但目前(谢天谢地，级别仅限于两个)我很高兴创建一个子类别模型和侧载。我遍历有效负载，获取每个子类别(第 2 级)的 ID，并将该子类别移动到列表中。我的序列化程序子类别:

import DS from 'ember-data';
import ember from 'ember';

export default DS.RESTSerializer.extend({
    isNewSerializerAPI: true,
    primaryKey: 'id',
    normalizeHash: {
    subcategories: function(hash) {
        if(ember.get(hash, 'hassubcategories') && !ember.isEmpty(ember.get(hash, 'subcategories'))) {
            var ids = [];
            ember.get(hash, 'subcategories').forEach(function(cat){
                ids.push(ember.get(cat, 'id'));
            });
            hash.children = ids;
        }

        return hash;
    }
    },
    extractMeta: function(store, type, payload) {
        if (payload && payload.subcategories) {

            var subs = [];
            var subs2 = [];

            payload.subcategories.forEach(function(cat){
                if(cat['hassubcategories']) {
                    var subsubs = cat['subcategories'];
                    subs.addObject(cat);
                    subs2.addObjects(subsubs);
                } else {
                    subs.addObject(cat);
                }
            });

            payload.subcategories = subs;
            payload.subsubcategories = subs2;
        }

        delete payload.id;  // keeps ember data from trying to parse "id" as a record (subcategory)
    delete payload.hassubcategories;  // keeps ember data from trying to parse "hassubcategories" as a record (subcategory)
    delete payload.CategoryName;  // keeps ember data from trying to parse "CategoryName" as a record (subcategory)
    delete payload.ParentID;  // keeps ember data from trying to parse "ParentID" as a record (subcategory)
    }
});

和模型子类别:

import DS from 'ember-data';

export default DS.Model.extend({
    CategoryName: DS.attr('string'),
    hassubcategories: DS.attr('boolean'),
    children: DS.hasMany('subsubcategories', {async: false })
});

子类别:

import DS from 'ember-data';

export default DS.Model.extend({
    CategoryName: DS.attr('string'),
    hassubcategories: DS.attr('boolean'),
});

也许它对某些人有帮助，也许我什至得到了如何真正动态地使用它的提示。

Answer 1

如果您不介意的话，我将在不显示太多代码的情况下讨论解决方案...:D

在 Ember Data(我假设您正在使用)中，存储包含平面集合中某种类型的所有对象(概念上)。每个对象都通过键 (id) 检索。 Ember Data 提供关系属性来模拟hasMany 或belongsTo 关系。因此，要在树结构中连接这些对象，您将拥有一个从父节点到其子节点的 hasMany:

App.Category = Ember.Model.extend({
    name: DS.attr(),
    subcategories: DS.hasMany('category'),
    parent: DS.belongsTo('category')
});

因此，在上面的 JSON 示例中，假设您有这样的类别模型记录:

[{
  id: 28,
  name: "By Asset Type",
  subcategories: [ 29, 73 ],
  parent: null
}, {
  id: 29,
  name: "Images",
  subcategories: [ 30, 31 ],
  parent: 28
}, {
  id: 73,
  name: "InDesign (related)",
  subcategories: [],
  parent: 28
}, {
// ... etc ...

所以从这个对象数组可以看出，它不是物理嵌套的，而是通过ID逻辑嵌套的。 如果您的 JSON 看起来像那样，它可以由 RESTAdapter 处理，一切都很好。 (我希望此时您同意并点头)。问题是，正如您所说，您的 JSON 是“不可变的”，我认为这意味着格式不会改变。

Serializer 助您一臂之力!通过创建自定义 CategorySerializer(它扩展了 RESTSerializer)，您可以覆盖 extractArray 和 extractSingle 函数来展平如上所示，将 JSON 有效负载转换为数组。我将把扁平化有效载荷的代码留给读者作为练习。 :)

您很幸运，您一次获得了树中的所有数据，而不必处理进行中间 REST 调用和处理 promise 解析。这当然是可行的，但它的异步性质使它有点棘手。

一些简单的阅读:

• > Connecting your app to a REST service
• > The RESTSerializer API

您的下一个问题可能是(对我来说也是如此)，如何使树中的每个节点响应其自己的 URL (/categories/61) 并在与其祖先和 sibling 的上下文中显示它。