Question

我在一个需要延迟加载树列表的项目中得到了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>

Answer 1

这使得GET请求

`return this.store.find('root');`

你必须在路线或控制器中进行操作，并且在视图中你可以发送这样的事件

`App.ClickableView = Ember.View.extend({
  click: function(evt) {
    this.get('controller').send('turnItUp', 11);
  }
});`

Ember - 将GET请求发送到API端点以获取树列表

1 个答案: