"Maximum call stack size exceeded" when using wijmo Events Calendar with Breeze

Question

I have this code at viewmodel:

self.events = ko.observableArray();

function getAllEvents() {
    dataservice.events.getAll()
        .then(queryEventsSucceeded)
        .fail(queryEventsFailed);
}

function queryEventsSucceeded(data) {
    self.events(data.results);
}

function queryEventsFailed(error) {
    logger.logError(error.message, "Error retrieving events");
}

Then I have a view like this:

<div data-bind="wijevcal: { appointments: events }"></div>

But this code throws Maximum call stack size exceeded exception.

When I fill self.events() with hard coded events like the following code, it works perfectly:

self.events([{
    id: "event1",
    subject: "Green event.",
    start: new Date(2013, 4, 18, 9),
    end: new Date(2013, 4, 18, 11),
    allday: true,
    description: "The green event.",
    color: "green"
}]);

I can't figure out what is happening...

Answer 1

My guess is that the Wijmo component can't handle an object with circular references (e.g., Customer has Orders and each order has a Customer) as it walks the bound object graph. Even entity types without navigation properties have the entity.entityAspect.entity circular reference.

You'll have to find a way to break that cycle. You might contact the Wijmo folks to see what they recommend.

The immediate workaround is not that pretty: you'll have to map the events into an intermediate objects (each an "ItemViewModel") that exposes exactly the information you need for binding. This is extra work which is OK once in a while but not something you want to do routinely.