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 · Accepted Answer · 2014-10-27 20:01:39Z

0

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);

answered Oct 27, 2014 at 20:01

awgreenarrow08

1651 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pro100sanya Over a year ago

I think when you get reference to myArray and do .clear and .pushObjects will cause re-rendering each time because observers still attached to mutable array.

awgreenarrow08 Over a year ago

Can you look at this jsbin and let me know how yours differs?

pro100sanya Over a year ago

I understood you, in this solution you don't see flickering because you just don't have much html over there. If you have complicated template - you definitely will see laggs.

Microfed Over a year ago

It's more likely that you observe binding/rendering big bulk of data problem (which is pain in Ember) than anything else. I'd recommend to consider use of CloakedView or Ember.ListView for your case.

dahlbyk · Accepted Answer · 2016-05-06 05:08:44Z

0

Ember uses run loop and queues to avoid described problem. Do you change the array (clean & fulfill) in a synchronous way?

edited May 6, 2016 at 5:08

dahlbyk

78k8 gold badges105 silver badges126 bronze badges

answered Oct 27, 2014 at 20:08

Microfed

2,89824 silver badges26 bronze badges

1 Comment

pro100sanya Over a year ago

var controller = App.__container__.lookup('controller:MyController'); var options = controller.get('options'); options.clear(); var objects = [{     //obj1 }, {     //obj2 }, {     //obj3 }];  options.pushObjects(objects);

I need update model from outside of ember framework.

Collectives™ on Stack Overflow

How to pause template rendering to update underlying model?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related