Passing a relationship model through link-to helper?

Ember CLI
1

Heyy!!

I’m having trouble passing a model to a route in ember cli. I’m making a simple app where posts have and author and a title. When you click the title you go to the post details and when you click the author you go to the author’s profile. My problem is that I go to the respective user but when I refresh the page I get a n error in the author route. I have no idea why, I’m guessing it has to do with the model not being fetched again when I refresh since it passes the model using link-to helper

My code:

app/models/author.js

import DS from 'ember-data';

export default DS.Model.extend({
  posts: DS.hasMany('post', {async: true}),
  name: DS.attr('string'),
  url: DS.attr('string')
});

app/models/post.js

import DS from 'ember-data';

var attr= DS.attr;

export default DS.Model.extend({
 author: DS.belongsTo('author'),
 title: attr('string'),
 description: attr('string'),
 date: attr('date'),
 url:attr('string'),
});

app/routes/author.js

import Ember from 'ember';

export default Ember.Route.extend({
   setupController: function(controller, model) {
   model.reload();       
   controller.set('model', model);}
 });

app/templates/posts.hbs</h4?
{{#each model as |post|}} 
  <div class="media">
    <a class="pull-left" >
    <img class="media-object" src={{post.url}} style="width:200px;height:200px">
  </a>
  <div class="media-body">
    <h1>{{#link-to 'post' post}}{{post.title}}{{/link-to}}</h1>
    <h4>Posted by: {{#link-to 'author' post.author.id}}{{post.author.name}}{{/link-to}} </h4>
      <p>{{post.description}}</p>
   </div>
</div>
{{/each}}

2

In your route, you can get rid of the setupController hook and do something like:

import Ember from 'ember';

export default Ember.Route.extend({
   model: function(params){
        return this.store.find('author', params.author_id);
    }
 });

And then in your router.js file, setup the route like this:

//boilerplate code generated by Ember-CLI
Router.map(function() {
  this.route('author', {path: ':author_id'});
  //other routes  
});
//boilerplate code generated by Ember-CLI
3

Hi, thank you for your response. I tried that but I still get the error when I refresh the page, this is the error: Error while processing route: author Unexpected token < SyntaxError: Unexpected token <…

Do you have any ideas? thanks

4

can you please change "this.route(‘author’, {path: ‘:author_id’}); " to this.route(‘author’, {path: ‘/:author_id’});

5

Tried it…I don’t now if this helps but his is my server side, it displays the right profile but the problem is when I refresh the page. …

var authors=[];//list of authors
var profileRouter= express.Router();

profileRouter.get('/', function(req, res) {
res.send({
'authors':authors
 });
});

profileRouter.get('/:id', function(req, res) {
res.send({
'author':  authors.find(function(user){
  return author.id==req.params.id
  // id: req.params.id,
})
});
});

app.use('/api/author', profileRouter);
6

A working example http://bloggr.exmer.com/. I still use setupController see source:

7

Thank you all, It worked, it was something in my server side :smile:

8

By the way, you don’t need to pass the id, you can pass the object and ember is smart enough to use the id. So instead of

{{#link-to 'author' post.author.id}}

you can do this

{{#link-to 'author' post.author}}