10

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?

Vasiliy vvscode Vanchuk
  • 7,007
  • 2
  • 21
  • 44
  • Me too following the same approach `if` block with toggle flag's value ..for some time. Would love to have something to force destroy and rendering the component fresh – Ember Freak Jun 12 '17 at 12:27
  • 4
    why do you need to rerender? – ykaragol Jun 12 '17 at 19:16
  • 4
    As @ykaragol's comment suggests, you shouldn't need to forcefully re-render a component (at least I can't think of a reason to). Perhaps you can elaborate on why you need to do so (or even better, provide some code showing why)? Part of the reason why Ember's rendering engine is fast is because it only redraws parts of the DOM as necessary (e.g. if the backing data object has been modified in some way). If we better understand why, we can likely suggest alternative methods that are more in line with how Ember works/will perform better than redrawing the entire component. – Michael Boselowitz Jun 13 '17 at 00:03
  • @MichaelBoselowitz in my case (for UI tests) I want to change some values which influence into helper behaviour ( can-helper ) but I don't want to make it observable, cause it's only for testing – Vasiliy vvscode Vanchuk Jun 13 '17 at 08:13
  • @MichaelBoselowitz another case - we need change tagName on the fly – Vasiliy vvscode Vanchuk Jun 13 '17 at 20:21
  • Ember.observer ...will update he UI if your UI is data driven and what you are trying to do can be added as the observer's dependency. – pro Jun 13 '17 at 23:58
  • @pro it doesn't work for all cases – Vasiliy vvscode Vanchuk Jun 14 '17 at 05:47

2 Answers2

0

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.

Djamel
  • 798
  • 8
  • 21
  • refresh will force component to rerender but it will not tear down component and redraw completely. – Ember Freak Nov 20 '17 at 17:08
  • can you provide the link to the documentation? Can find `.refresh` method in API – Vasiliy vvscode Vanchuk Nov 21 '17 at 07:37
  • https://emberjs.com/api/ember/2.15/classes/Ember.Route/methods/refresh?anchor=refresh but @kumkanilliam is right it will note redraw completely the component, but if it's only to refresh some data it might work for you as it work for me – Djamel Nov 21 '17 at 11:25
-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

DeclanPossnett
  • 376
  • 1
  • 5
  • 13