Rerender component in application.hbs whenever route changes

My application.hbs houses a slideshow that gets it data from the current route. I need the component to rerender anytime the sites route changes, how can I do this?

The simplest solution is for your component to have an attribute that designates the photos for the slideshow:

{{dope-slideshow photos=photos ...}}

You should then reassign the photos property of the context (the controller) and the component will re-render itself automatically when that photos property changes.

I think my slideshow does render its photos this way… I’m passing the new data to it from the current routes router as so:

App.SomeRoute = Ember.Route.extend({
  setupController: function() {
    this.controllerFor('application').set('photos', model);

The problem is, the slideshow plugin alters the dom, and I cant just pass new slides to it, instead the slideshow has to be initialized once the component renders, like so:

export default Ember.Component.extend({
    didRender: function() {

I’m using the cycle2 slideshow library.

Im my application.hbs the slideshow is input like so:

<div class="slideshow">
        {{cycle2-slideshow slides=model}}

And the component template itself looks like:

{{#if slides}}
<ul class="cycle-slideshow" data-cycle-slides="li">
    {{#each slides as |slide|}}
        <div class="caption">
            <div class="container">
<!-- There are no slides to display -->

If you set the photos property on your application controller than this is what needs to be passed in to your component:

 {{cycle2-slideshow slides=photos}} (instead of slides=model)

You could use the didUpdateAttrs component lifecycle hook for that.