dimanche 7 février 2016

How to fetch data from server for a nested route ember 2.3.0

I have a post model and a comments model that are related as shown below:

//  app/models/post.js

import DS from 'ember-data';

export default DS.Model.extend({
 //....
 comments: DS.hasMany('comment'),
 //....
})

// app/models/comment.js

import DS from 'ember-data'

export default DS.Model.extend({
 //....
 ad: DS.belongsTo('post'),,
 //....
})

In app/router.js I have

Router.map(function() {
  this.route('post', {path: '/post/:post_id'}, function() {
    this.route('comments');
  });
)};

I have a post template in app/templates/post.hbs that looks like this:

<h2>{{model.title}}</h2>
<p>{{model.body}}</p>

  {{#link-to "post.comments"}}
    <h2>Comments</h2>
  {{/link-to}}
  {{outlet}}

I also have a template to render the comments in app/templates/post/comments.hbs

{#each model as |comment|}}
  <p>{{comment.body}}</p>
{{/each}}
{{outlet}}

I want when someone clicks on the comments link on the post template, the comments template be rendered on the {{outlet}} of the post template. The problem I have is fetching the data for comments model. I have a route for the comments in app/routes/post/comments.js and it looks like this:

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    //I don't know what to do here.
  }
});

The comments in my backend server are exposed on /posts/:post_id/comments endpoint. How can i do to get the comments on the comments template?

Aucun commentaire:

Enregistrer un commentaire