How to enforce Ember.Component to rerender?

Question

Is there any way to make Ember.Component force rerender?

There is .rerender() method, but it doesn't help. Also I tried use .notifyPropertyChange for template, layoute - the same

Right now for such cases I need to wrap piece of template into if wrapper and toggle flag's value. But the way is ugly and boring.

Any ideas?

Answer 1

Take a look at the Ember Run Loop

To override this 'background' process you can use something like this:

showElement: false,

actions: {
  buttonClick() {
    Ember.run(()=> {
      this.toggleProperty('showElement');
    })
  }
}

This will force the run loop to restart, rather than Ember handling any property changes and deciding on how your code should be executed, much like the JavaScript event loop.

A good explanation of this can be found here

Answer 2

I had the same issue with one of my component. As it say by the community, you should not have to do this if you use correctly ember pattern.

However, as it was on a specific case, I found a way around.

You have to create a action in your routes/somefile.js to refresh as like so :

actions: {
  refresh() {
    this.refresh();
  }
}

and in your component view, add an hidden button to click on action of the router like so

<button id="refresh_invoice" class="hidden" {{action 'refresh'}}></button>

and the in your component, using Jquery, you will be able to click on the hidden button, and this will refresh the component.

It's not a great fix, but it's work. Hop it will help.