余烬 - 将 GET 请求发送到树列表的 API 端点

我在一个需要延迟加载的树列表的项目中有Ember和Ember-Data。

API 具有终结点/roots该终结点具有 /roots/categories 和 /roots/components 的子项，这些子项在 /roots 时未完全加载。

当我点击/roots端点时，我可以加载子项列表，但我不知道如何发送 GET 请求来获取我单击的任何列表项的子项。 例如，当我单击类别项时，我想从/roots/categories端点获取数据，并将其内容设置为我的 Ember.CollectionView 的新实例。

这是我的小提琴，TreeNodeView 中的click方法就是我卡住的地方：http://jsfiddle.net/z15k7f13/

以下是/roots的数据示例：

{
  "name": "",
  "path": "/roots",
  "parent": "null",
  "role": {
    "Owner": false,
    "Employee": true
  },
  "children": [
    {
        "name": "categories",
        "path": "/categories",
        "parent": "/",
        "roles": {
            "Owner": false,
            "Employee": "false"
        },
        "children": [] 
    },
    {
        "name": "components",
        "path": "/components",
        "parent": "/",
        "roles": {
            "Owner": true,
            "Employee": false
        },
        "children": []
    }
  ]
}

以下是/roots/categories的数据：

{
  "name": "categories",
  "path": "/categories",
  "parent": "/roots",
  "role": {
    "Owner": true,
    "Employee": true
  },
  "children": [
    {
        "name": "electronics",
        "path": "/categories/electronics",
        "roles": {
            "Owner": true,
            "Employee": false
        },
        "children": []
    }
  ]
}

JavaScript：

App = Ember.Application.create();
App.Router.map( function() {
  this.resource('index', {path: '/'});
});
App.IndexRoute = Ember.Route.extend({
  model : function(){
    return this.store.find('root');
  },
  setupController: function(controller, model) {
    controller.set('model', model);
  }
});
App.TreeBranchView = Ember.CollectionView.extend({
  tagName: 'ul'
});
App.TreeNodeView = Ember.View.extend({
  tagName: 'li',
  template  : Ember.Handlebars.compile('<p>Click here: {{view.content.name}}</p>'),
  click: function(evt) {
    var treeBranchView = new App.TreeBranchView.create();
    /**
      If I click on the 'categories' item how does 
      Ember do a GET to the api at the endpoint
      http://jsonstub.com/roots/categories and set the
      content on the new 'treeBranchView' instance?
    */
  }
});
App.ApplicationAdapter = App.RESTAdapter = DS.RESTAdapter.extend({
  host: 'http://jsonstub.com',
  headers: {
    'Content-Type': 'application/json',
    'JsonStub-User-Key': 'xxxx',
    'JsonStub-Project-Key': 'xxxxx'
  }
});
App.Child = DS.Model.extend({
  name: DS.attr('string'),
  path: DS.attr('string'),
  parent: DS.attr('string'),
  role: DS.attr(),
  children: DS.attr()
});
App.Root = DS.Model.extend({
  name: DS.attr('string'),
  path: DS.attr('string'),
  parent: DS.attr('string'),
  role: DS.attr(),
  children: DS.hasMany(App.Child)
});
App.ApplicationSerializer = DS.RESTSerializer.extend({
  normalizePayload: function(payload) {
    // Create ID for paylaod
    var payloadId = payload.path.substring(1).replace(/'//g, '-');
    // Create ID for payload.children objects
    payload.children.forEach(function(child) {
        child.id = child.path.substring(1);
        child.id = child.path.replace(/'//g, '-').substring(1)
    });
    // Array of child object IDs
    var childIdArray = payload.children.map(function(child) {
        return child.id;
    });
    payload = {
        roots: [{
            id: payloadId,
            path: payload.path,
            parent: payload.parent,
            role: payload.role,
            children: childIdArray
        }],
        children: payload.children
    }
    return payload;
  }
});

模板：

<script type="text/x-handlebars" data-template-name="application">
  <nav>
    Example
  </nav>
  <div class="container">
    {{outlet}}
  </div>
</script>
<script type="text/x-handlebars" data-template-name="index">
  {{#each item in model}}
    {{view 'TreeBranch' content=item.children itemViewClass='TreeNode'}}
  {{/each}}
</script>