How to pause template rendering to update underlying model?

Question

Currently I have controller field that contains Mutable Array full of objects. Each time i add/remove elements in array - template rendering occurs. That is good.

And now i have a situation, where I have to replace whole array.

If I do this via .clear() and then .pushObjects() I see template flickering.

It is pretty noticeable, because Em render empty template at .clear and render template again, after .pushObjects() call.

I thought, is there any way to pause template rendering while model is updating? In this case should be only one render call, and flickering shouldn't be.

So question is: how to control rendering process in Ember?

awgreenarrow08 awgreenarrow08 · Accepted Answer · 2014-10-27T20:01:39

Ember will update your template when you call the set method. For example, in one of your controller functions, you may do something like this:

var someArray = [ 1, 2, 3, 4, 5 ];
this.set('myArray', someArray);

This will cause anything binding to myArray to update. In your case, I would get your array, do your modifications (clear and pushObjects), then call set:

var arr = this.get('myArray');
arr.clear();
arr.pushObjects(...);
this.set('myArray', arr);

How to pause template rendering to update underlying model?

2 Answers