Ember handlebar view for Foreignkey values

Ember Data
1

I have 4 models as below

exam model

name: attr('string'),
owner: belongsTo('user'),

question model

content: attr('string'),
exam: belongsTo('exam')

answer model

owner: belongsTo('user'),
question: belongsTo('question'),
answer: attr('string'),
remarks: attr('string'),
exam: belongsTo('exam')

user model

name : attr('string'),
email : attr('string'),
password : attr('string'),

when I load the models into a route. Now when I run the following template code

{{#each model.answers as |ans|}}
<p>{{ans.question}}</p>
<p>{{ans.question.content}}</p>
{{/each}}

it shows the output as follows

`<frontend@model:question::ember276:5>`

<frontend@model:question::ember281:6> <frontend@model:question::ember286:4>

why is is showing like this? why not the original content in the content field?

2

This looks like an Ember Data bug to me. I can reproduce.

The underlying explanation is that ans.question is allowed to load asynchronously, but when you say ans.question we need some placeholder object that stands in for the maybe-not-yet-loaded Question. Ember Data handles this with a proxy object. But the proxy object also has a built-in property named content, which is taking precedence over the field in your model.

To workaround, you can rename your content field to something else, like body. If you can’t easily change the server side, you can rename it within your app via a serialize:

// app/serializers/question.js
import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
  attrs: {
    // renames server's "content" field to "body" within our ember app, to avoid
    // colliding with a built-in name in ember-data.
    body: 'content'
  }
});

Alternatively, this bug is not present if your question relationship is synchronous:

question: belongsTo('question', { async: false }),

because in that case no proxy is needed. But this also requires that you take responsibility for guaranteeing that the question model is already loaded before you try to access it.

1 Like
3

I filed https://github.com/emberjs/data/issues/5732 for this.

1 Like
4

Thank you for your answer sir, I’m started using ember just before one or two weeks, so I’m not that much familiar with it. Your answer helped me a lot, and if you could share your linkedIn profile, it will be helpful for keep in touch and will be very much helpful for me