Rerender component in application.hbs whenever route changes

1

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?

2

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.

3

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() {
        $('.cycle-slideshow').cycle();
    },
});

I’m using the cycle2 slideshow library.

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

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

And the component template itself looks like:

{{#if slides}}
<ul class="cycle-slideshow" data-cycle-slides="li">
    {{#each slides as |slide|}}
    <li>
        <div class="caption">
            <div class="container">
                <h1>
                    {{slide.title}}
                </h1>
                {{{slide.content}}}
            </div>
        </div>
    </li>
    {{/each}}
</ul>
{{else}}
<!-- There are no slides to display -->
{{/if}}
{{yield}}
4

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.