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:
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.