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

Question

I am working hottowell template to create spa application and I am getting a nice error from jquery. Basically my problem start at the moment to try bind my view from viewModelBinder.js (from durandal library).

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

at the moment to call beforeBind this code is executed (main.js of my own app)

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

where kendo.bind is something like (kendo.web.js from 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 am runing the line

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

I am getting a lot of exceptions from line 4224 of file jquery-1.9.1.js

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

and line 4242 of file jquery-1.9.1.js

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

These exceptions are causing the error in the console:"Maximum Call Stack Size Exceeded"

My suspicion is my html view, maybe some html element it's triggering this problem . Other interesting comment is that the problem is present when the element inside of html view change from visible :false to visible:true (my view it's a html table what is able to show or hide detail for the selected row)

Answer 1

What data object are you trying to bind? The "call stack exceeded" error often occurs when binding a Kendo UI component to a data object that has circular references (e.g., customer -> orders[0] -> customer). All breeze entities have circular references (e.g., customer.entityAspect.entity which points back to customer).

Therefore, you need to either train the component to ignore certain paths or insert an intermediary object that clips those paths. If you're just presenting (not updating) the object, you can make a safe copy with JSON.stringify, passing in a replacer function to exclude the circular paths.

This is a bigger topic than I have time for in this answer. Kendo UI is not the only one with this problem, I hasten to add.