javascript - 如何用 Ember Data 表示模型树？

Question

我正在寻找一种从 Ember 模型生成 D3.js 数据结构的方法，以将我现有的应用程序转换为 Ember。目标是显示任务树，每个任务有 0 个或多个子任务。

这是我想要提供给 D3.js 的结果:

[
  {
    "parent": 429,
    "name": "Parent task 1",
    "id": 428
    "children": [
      {
        "parent": 428,
        "name": "Sub task 1",
        "id": 425
      },
      {
        "parent": 428,
        "name": "Sub task 2",
        "id": 426
      }
    ]
  },
  ...
]

我尝试像这样定义我的模型:

Minp.Task = DS.Model.extend({
  name: DS.attr(),
  subtasks: DS.hasMany('task'),
  data: Ember.computed(function () {
    return {
      id: this.get('id'),
      name: this.get('name'),
      type: 'task',
      children: this.get('subtasks').map(function (task) {
        return task.get('data');
      })
    };
  }).property()
});

但我收到“超出最大调用堆栈大小”错误。似乎从 data 属性调用 this 会导致它在无限循环中再次被调用。

如果我为 child 返回一个空数组，一切正常。

你知道我为什么会收到这个吗？还有另一种方法吗？

Answer 1

我认为使用关联会更好，不是吗？尝试使用自引用数据结构。

Minp.Task = DS.Model.extend({
  parent: DS.belongsTo('task', inverse: 'children');
  children: DS.hasMany('task', async: true, inverse: 'parent');
});

希望有帮助。有点取决于您想用这些东西做什么，但这就是我在构建基于树的数据结构时通常使用的。