Chrome // kendoUI / jQuery: maximum call stack size exceeded

Question

I am working on a hottowell template to create a spa application and I am getting a good error from jquery. Basically, my problem starts from the moment I try to connect my view with viewModelBinder.js (from the durandal library).

viewModelBinder.beforeBind(obj, view); action(); viewModelBinder.afterBind(obj, view); 

currently, to call beforeBind this code is being executed (main.js of my own application)

 kendo.ns = "kendo-"; viewModelBinder.beforeBind = function (obj, view) { kendo.bind(view, obj.viewModel || obj); }; 

where kendo.bind is something like (kendo.web.js from the kendo ui library):

 function bind(dom, object) { var idx, length, roles = kendo.rolesFromNamespaces([].slice.call(arguments, 2)); object = kendo.observable(object); dom = $(dom); for (idx = 0, length = dom.length; idx < length; idx++) { bindElement(dom[idx], object, roles); } } 

From here when i run the line

  object = kendo.observable(object); // where object it my viewmodel as far i see in the debuger. 

I get many exceptions from line 4224 of the jquery-1.9.1.js file

 div.querySelectorAll("*,:x"); 

and line 4242 of the jquery-1.9.1.js file

 matches.call( div, "[s!='']:x" ); 

These exceptions cause a console error: "Maximum call stack size"

My suspicion is my html view, maybe some html element is causing this problem. Another interesting comment is that the problem is present when the element inside the html view changes from visible: false to visible: true (my view of its html table, which can show or hide details for the selected row)

Answer 1

What data object are you trying to bind? A call stack error often occurs when binding a Kendo user interface component to a data object that has circular references (for example, customer → orders [0] → customer). All breeze objects have circular links (e.g. customer.entityAspect.entity, which point to the client).

Therefore, you need to either train the component to ignore specific paths, or insert an intermediate object that copies these paths. If you are just presenting (not updating) an object, you can make a safe copy using JSON.stringify by passing a replace function to exclude circular paths.

This is a more important topic than I have time in this answer. Kendo's user interface is not the only issue I am in a hurry to add.