binding to ko.observeableArrays created by breeze.js causes stack to max out about knockout-kendo HOT 9 OPEN

Could you possibly get a sample in jsFiddle? Otherwise, I will try to repro this as soon as I can. The getWidget function is actually used to instantiate the widget along with returning it.

Sounds like the breeze observableArray possibly has extra properties, etc. that are tripping up the call to ko.toJS. That is used to get clean data to pass into the widget (all observables, unwrapped).

from knockout-kendo.

You are correct that there are extra properties in the breeze objects. Breeze returns an array of objects of a class named Entity. It contains a property of type EntityAspect. EntityAspect, in turn, has a property named Entity of type Entity which is a pointer to the original Entity. i.e., a circular reference. This is what is tripping up ko.toJS

from knockout-kendo.

I wonder if there is a way to workaround this issue. Does Breeze provide a function to get a plain JS object from its structures?

from knockout-kendo.

First of all, thanks for continuing to looking into this.

As far as I can tell, breeze does not provide a function to unwrap the objects it creates. This is understandable as the breeze developers may assume that since they are creating knockout objects, that the knockout unwrapper (ko.toJS) would do the job.
In the meantime, I modified that line of your code to not use the ko.toJS at all, but to replace it with ko.utils.unwrapObserveable. This is a more lightweight unwrapper that I'm pretty sure meets the requirements of what you intended. In any case, this works for my situation.

Even with the above fix, I found that deeper in the kendo code (not yours), that the breeze circular references still created a problem during binding, causing a stack overflow. Given that I'm not keen to modify kendo code for each of their widgets, and that I really want to use Kendo, my current resolution is to essentially create an unwrapper of sorts. It basically consists of creating objects that contain the breeze observeable properties minus the EntityAspect property. It's not an optimal solution, but the overhead is minimal and it seems to be working so far.

from knockout-kendo.

OK - I will keep looking into it when I get a chance. The difference between ko.utils.unwrapObservable and ko.toJS is that the latter will recursively unwrap everything, so that we can pass just a plain JavaScript object.

from knockout-kendo.

I also hit this same issue of stack overflow when using these bindings against a grid - do you still need a solution or are there any workarounds?

from knockout-kendo.

@Gaspode44 - I haven't had a chance to revisit this one. Ideally, I would like to avoid having Breeze specific code in the bindings, if possible.

A good place to start would be trying to replace ko.kendo.setDataSource at run-time. Here is the current implementation that you could overwrite:

//utility to set the dataSource with a clean copy of data. Could be overridden at run-time.
ko.kendo.setDataSource = function(widget, data, options) {
    var isMapped, cleanData;

    if (!options || !options.useKOTemplates) {
        isMapped = ko.mapping && data && data.__ko_mapping__;
        cleanData = data && isMapped ? ko.mapping.toJS(data) : ko.toJS(data);
    }

    widget.dataSource.data(cleanData || data);
};

from knockout-kendo.

thanks for the quick response I'll take a look at that - do you think it would be possible to use ko mapping options to get toJS to ignore the EntityAspect property on the objects in the array or am I misunderstanding how mapping works?

from knockout-kendo.

ok I managed to move past the stack overflow - I added in the knockout mapping plugin and changed the set data source to look like this

ko.kendo.setDataSource = function(widget, data, options) {
    var isMapped, cleanData;

    if (!options || !options.useKOTemplates) {
        isMapped = ko.mapping && data;
        cleanData = data && isMapped ? ko.mapping.toJS(data, { ignore: ['entityAspect', 'entityType'] }) : ko.toJS(data);
    }

    widget.dataSource.data(cleanData || data);
};

adding in the ignore for both the entityAspect and entityType properties - I'm not sure yet if that will have any effect on Breeze

The other change I made but to be honest didn't quite understand was remove the check for the data.ko_mapping property - I needed to do that to trigger the use of the mapping plugin as that property was undefined on the object I get back from Breeze

I can now at least get a kendo grid to display and observable array returned by Breeze

from knockout-kendo.