Durandal Wijmo Issue

Question

I am trying to use ComponentOne’s Wijmo chart control on my Durandal View.

I am trying to load the Chart control on ‘attached’ event in the module js. It seems that the Chart control is not rendering but instead the following error is being thrown:

Uncaught TypeError: Cannot read property 'startX' of undefined jquery.wijmo-pro.all.3.20132.9.min.js:26
(anonymous function)jquery.wijmo-pro.all.3.20132.9.min.js:26
jQuery.event.dispatchjquery-1.9.1.js:3074
elemData.handlejquery-1.9.1.js:2750

Even though the error apparently seems to be thrown from the Wijmo control’s scripts, most probably Durandal is raising the attached event before the view is being displayed. In other words there is no layout in the DOM during initializing.

Below is the code I am running on vanilla Durandal Starter Kit’s flickr module:

attached: function() {
            $(document).ready(function () {
                $("#wijpiechart").wijpiechart({
                    radius: 140,
                    hint: {
                        content: function () {
                            return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
                        }
                    },
                    header: {
                        text: "Steam Mac Hardware Survey"
                    },
                    seriesList: [{
                        label: "MacBook Pro",
                        data: 46.78,
                        offset: 15
                    }, {
                        label: "iMac",
                        data: 23.18,
                        offset: 0
                    }, {
                        label: "MacBook",
                        data: 20.25,
                        offset: 0
                    }, {
                        label: "Mac Pro",
                        data: 5.41,
                        offset: 0
                    }, {
                        label: "Mac Mini",
                        data: 3.44,
                        offset: 0
                    }],
                    seriesStyles: [{
                        fill: "180-rgb(195,255,0)-rgb(175,229,0)",
                        stroke: "rgb(175,229,0)",
                        "stroke-width": 1.5
                    }, {
                        fill: "90-rgb(142,222,67)-rgb(127,199,60)",
                        stroke: "rgb(127,199,60)",
                        "stroke-width": 1.5
                    }, {
                        fill: "90-rgb(106,171,167)-rgb(95,153,150)",
                        stroke: "rgb(95,153,150)",
                        "stroke-width": 1.5
                    }, {
                        fill: "90-rgb(70,106,133)-rgb(62,95,119)",
                        stroke: "rgb(62,95,119)",
                        "stroke-width": 1.5
                    }, {
                        fill: "90-rgb(166,166,166)-rgb(149,149,149)",
                        stroke: "rgb(149,149,149)",
                        "stroke-width": 1.5
                    }]
                });     
            });
        }

A simple fix would be to redraw the control after the above code with a delay:

setTimeout(function () {
                    $("#wijpiechart").wijpiechart("redraw");
                }, 100);

But this is perhaps not an elegant solution.

Is there any other event in Durandal for handling this kind of drawing of controls after the view is displayed?

Answer 1

This has been addressed in the latest 2.1. branch of Durandal. Here's the quote from @EisenbergEffect https://github.com/BlueSpire/Durandal/issues/406#issuecomment-30340696

Ok. First, pull down the latest code from branch Version-2.1.0. I just pushed a bug fix for the entrance transition that was breaking element measuring in the attached callback. After you update, try your code again and let me know if that fixes the problem for you.

Also, you do not need to use jQuery's document ready inside of Durandal. Durandal doesn't execute any app code until after it is ready. So, no need to worry about that.