Ember通过嵌套树进行路由

时间:2014-08-14 03:07:44

标签: ember.js ember-data

我正在尝试允许在树中导航并提供完整的URL。 我在http://emberjs.jsbin.com/wurez/2/edit

上有一个例子

我的数据当前存在如下:

App.FamilyMember = DS.Model.extend({
  parents: DS.hasMany('familyMember'),
  name: DS.attr('string')
});

FIXTURES = [
  {
    id: 'GP-A',
    name: 'GP A'
  },
  {
    id: 'GP-B',
    name: 'GP B'
  },
  {
    id: 'GP-C',
    name: 'GP C'
  },
  {
    id: 'GP-D',
    name: 'GP D'
  },
  {
    id: 'P-A',
    name: 'P A',
    parents: ['GP-A', 'GP-B']
  },
  {
    id: 'P-B',
    name: 'P B',
    parents: ['GP-C', 'GP-D']
  },
  {
    id: 'P-C',
    name: 'P C',
    parents: ['GP-C']
  },
  {
    id: 'C-A',
    name: 'C A',
    parents: ['P-C']
  },
    {
    id: 'C-B',
    name: 'C B',
    parents: ['P-B']
  },
    {
    id: 'C-C',
    name: 'C C',
    parents: ['P-A']
  }
];

我想在/family/GP-A/P-A的行中启用一个网址,并显示GP A - >的面包屑{$ 1}}位于页面顶部。这种情况是N-deep,所以祖父母,父母和孩子的路线都不适合我。我假设我必须定义一条路线:

P A

我不确定我是否走错了道路并且有不同的方法或如何将可链路路径实现到树数据结构中。

1 个答案:

答案 0 :(得分:1)

我将概括地描述我最近在代码中使用的技术很长并且也不属于我,因此我无法分享它。这里包含的代码只是在没有运行或测试的情况下输入:)

我假设您的节点都是相同的类型。由于所有相同类型的对象都具有唯一ID,因此您的URL模式只需要具有要链接的节点的ID。因此,您的网址将类似于/node/123

就我而言,我在名为ObjectController的{​​{1}}上创建了一个属性:

tree

为了描述正在发生的事情,我触发模型更改对App.Node = DS.Model.extend({ parent: DS.belongsTo('node', {inverse: 'children'}), children: DS.hasMany('node', {inverse: 'parent'}); }); App.NodeController = Ember.ObjectController.extend({ tree: [], recursiveTreeWalker: function(result, resolve, model) { var self= this, parent= model.get('parent'); if (parent) { parent.then(function(resolvedParent) { result.push(resolvedParent); self.recursiveTreeWalker(result, resolve, resolvedParent); }); } else { resolve(result); } }, treeBuilder: function() { var currentNode= this.get('model'), self= this; var builder= new Ember.RSVP.Promise(function(resolve,reject) { self.recursiveTreeWalker([], resolve, self.get('model')); }); builder.then(function(tree) { self.set('tree', tree); } }.property('model') }; 的调用。这会创建一个treeBuilder,等待它解析并设置控制器的Promise变量。 promise调用tree,它将结果推送到模板使用的对象。如果它有父,则它会递归调用自身。在recursiveTreeWalker内部调用它的原因是您需要完全“实现”树木助手中的父节点。最后,Promise变量将包含一个有序列表,选定的节点朝向树的根。我的解决方案实际上需要将所选节点的兄弟节点包含在根目录中,因此结果中的每个级别都是另一个数组。

最后,您的模板:

tree