CODEWITHSUNDEEP
javascriptember.jsember-data
sentinel21
sentinel21

Reputation: 546

second level ember route not rendering

I've been having a good deal of trouble recently trying to get sub templates to render in Ember. The jsbin below doesn't work because I'm trying to use the REST adapter and just can't figure it out how to get mockjax and ember working together -- anyway, I think the REST adapter critical to the problem, as I will explain.

So I have a contact item. I can see ember calling my /api/contacts route to grab the model for all the contacts for listing. After this, I'm trying to create a link to an individual contact and have that render within the same template. In other words, I would still see the list of contacts, but I also see information on the individual contact that I just clicked on. That individual contact contains many contactPoints. Basically, what's happening is that I never see ember looking for the contactPoints. I see the "contact" template render, but it never has any contactPoints.

If this unclear, I can clarify. But the link below should help. Thanks!

http://emberjs.jsbin.com/xacuyalu/6/edit

Upvotes: 0

Views: 55

Answers (1)

Cyril Fluck
Cyril Fluck

Reputation: 1581

I've simplified a bit your JsBin to highlight the solution

http://emberjs.jsbin.com/xacuyalu/7

With what you are trying to achieve, there's no need to name outlets.

The main problem in your code is the way you use variables inside loops and templates. In your contacts template, you write

{{#each contact}}

But then forget to use contact as a variable when passing values

The same way, in your contact template, you use contactItem that doesn't exist. You can simply use the attribute of your model here.

The problem with mockajax was the url you were mocking /api/contacts instead of /contacts. This works in my modified JsBin.

Also please note that your payload won't work with contactPoints

EDIT: I've updated the JsBin to display the contact points.

http://emberjs.jsbin.com/xacuyalu/9

First thing, I would recommend you to read this https://github.com/emberjs/data/blob/master/TRANSITION.md. It will show you how to prepare your data to work nicely with Ember Data.

I have extracted your payload to be more readable. Here are the things that I've done:

  • Sideload contact points
  • Change the name of the attribute in the json from contactPointsIds to contactPoints
  • add the address attribute on the ContactPoint model
  • Rename the attribute on the Contact model from contactPoint to contactPoints

Upvotes: 1

Related Questions