Re-render template when changing route

Question

I have an application with two outlets (in the application.hbs), where-as the second renders a grid of videos that is displayed no matter on which route you are on, but the videos that are displayed can change. The important bits of the model"

App.Video = DS.Model.extend({
    ...
    frontpage: DS.attr('boolean'),
    ...
});

So when I am on most routes I want to display the videos with frontpage == true and on one route I want to display all the videos, no matter what frontpage says. I seem to have gotten it half working. The important routes look like this:

App.Router.map(function () {
    this.resource('videos', { path: 'videos/' }, function () {
        this.route('video', { path: ':video_id' });
    });
    ...

And my videos.index template (which I render in the second, named outlet) looks like this:

{{#each video in controller}}
  {{log isFrontPage}}
  <!--if we only want to display the frontpage-videos in the grid -->
  {{#if isFrontPage}}
  <!--show only videos with frontpage = true -->
    {{#if video.frontpage}}
      {{partial 'video-thumbnails'}}
    {{/if}}
  {{else}}
    <!--show all videos, which will be used for the /videos site-->
    {{partial 'video-thumbnails'}}
  {{/if}}
{{/each}}

The isFrontPage is a property in the ApplicationController, that gets set to true/false in the right routes. When I initially load the index route it all works fine and just loads the videos with frontpage==true, when I then switch to the /videos route it all works fine as well and it loads all the videos. But then, no matter what route I go on, it just stays the same. And interestingly enough, even though the displayed videos change when going on the /videos route the log command doesn't print anything anymore.

Also, I am using the renderTemplate function to get the functionality, something like that in the VideosIndexRoute:

this.render('videos.index', {
  outlet: 'videogrid',
  into: 'videos.index',
  controller: controller
});

And in the ApplicationRoute I have the same, just the into and the controller are for the application route.

So anyone knows how I can make ember rerender that template on the router-level? Or is there anything that I am missing and there is another/better way to do this? Any help is really appreciated.

Found a solution to it. I am now simply extending a pre-defined route that sets the isFrontpage and this.render accordingly. — Markus

Markus Markus · Accepted Answer · 2014-02-14T19:27:39

Ok, I found a solution. The problem was, that ember loads the ApplicationRoute only one single time, so the renderTemplate method was never called again. I simply created a Route-object that all the other routes extend, so the right renderTemplate gets called for the right routes.

Re-render template when changing route

1 Answers