Template renders only after refreshing the page

Question

I want to have the list of universities and after clicking on one of them, next to this list majors' list is supposed to show. After clicking on one of majors, next to those two lists list of subjects shows. However I did something wrong in routing I suppose. After clicking on one of universities URL changes but the list of majors doesn't show up. But after refreshing the page (with this url) it works perfectly fine. Here is the code: http://jsbin.com/AQAref/1/edit

@JeremyGreen it wasn't working for me eighter, so I just replaced the relative paths to the dependencies jsbin.com/AQAref/3/edit but it seams still somewhat broken ... — intuitivepixel

Kingpin2k Kingpin2k · Accepted Answer · 2013-10-14T04:25:06

Like the other guys said, your jsbin doesn't work. It's pretty apparent the real problem is with your link-to. If it works when you refresh, but not when you click on a link then the difference is where the model is coming from. When you refresh, the model comes from the model hook. When you navigate using a link, the model was supplied by the link-to statement.

In your situation, if you refresh the page you get the majors of a specific university from your university model hook. If you click on the university from your page, the university model is sent to the university resource, not the majors of that university.

So either this needs to say majors

{{#each}}
   <li {{bindAttr id="id"}}>
     <div class="list-element-title">
        {{#link-to 'university' this.majors}}{{name}}{{/link-to}}
     </div>
   </li>
{{/each}}

instead of

{{#each}}
   <li {{bindAttr id="id"}}>
     <div class="list-element-title">
        {{#link-to 'university' this}}{{name}}{{/link-to}}
     </div>
   </li>
{{/each}}

Or your route needs to return the university, but I'm guessing the route model hook is correct since you said it works on refresh.

 App.UniversityRoute = Ember.Route.extend({
  model: function(params) {
    var majors = universities.findBy('id', params.univ_id).majors;
    return majors;
  }
 });

I didn't look through the rest of your code, but make sure you are sending the same model through the link-to as you would get if you got the model through the model hook.

Template renders only after refreshing the page

1 Answers