This is a migrated thread and some comments may be shown as answers.

Browser crash !! (stack overflow)

2 Answers 392 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Insad
Top achievements
Rank 2
Insad asked on 17 Jan 2017, 11:34 AM

Hi,

 

When I run the sample in the DoJo ( http://dojo.telerik.com/@Insad/uBARI ) on the Opera browser you will see that an infinite loop starts, crashing with a stack overflow.

On other browser you might see the issue as well if the appropriate devtools are used :)

 

Can someone please explain what is wrong in this straight forward sample?

I can't figure out why this happens.

It is stopping large parts of our development at the moment so please can someone help me with this..

 

Best regards,

 

Insad

2 Answers, 1 is accepted

Sort by
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 19 Jan 2017, 08:18 AM
Hello ,

Thank you very much for the provided runnable example. It was very helpful in determining the cause of the described behaviour immediately.

I have already responded to you in the other thread but I will also post the explanation here in case anyone else has stumbled upon this scenario.

It looks like the idea of the provided code is to bind the view model to a template. In this template, there is another one which initializes a kendo UI Grid bound to a remote data source.

The trouble comes from the source binding. Below are the events which lead to the browser crash:

1) The view model is bound first and its template is rendered
2) The Kendo UI Grid is initialized and a call to the remote service is made.
3) Once the data source of the Kendo UI Grid is received, the change event of the view model is raised.
2) And as a view model should do when it detects a change, it goes to step 1)

This is how we end up with an infinite loop and a stack overflow exception. In your case, I recommend moving the Kendo UI Grid a level up, i.e. eliminating the template of the view model and the binding to the this. I have reworked the example here:

http://dojo.telerik.com/EJEGe   

If you wish to keep the template, you may return the data source for the grid as a result of a function(as opposed to an array of observable objects which trigger change). Wrapping the data source in that way restricts its change event, the change event does not bubble up. As a result, the stack overflow exception is prevented. 
 
Note that if the data source is used for another widget on the same page, there will be two separate instances instead of a shared one. 

http://dojo.telerik.com/AMurI/2

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Insad
Top achievements
Rank 2
answered on 24 Jan 2017, 10:39 AM

Hello Alex,

 

Thanks for the response. We have chosen the second option and so far everything works as we need it.

 

Kind regards,

 

Insad

Tags
MVVM
Asked by
Insad
Top achievements
Rank 2
Answers by
Alex Hajigeorgieva
Telerik team
Insad
Top achievements
Rank 2
Share this question
or