0

Durandal View で ComponentOne の Wijmo チャート コントロールを使用しようとしています。

モジュール js の 'attached' イベントで Chart コントロールを読み込もうとしています。Chart コントロールがレンダリングされていないようですが、代わりに次のエラーがスローされています。

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

エラーは Wijmo コントロールのスクリプトからスローされたように見えますが、ほとんどの場合、Durandal はビューが表示される前に添付イベントを発生させています。つまり、初期化中に DOM にレイアウトはありません。

以下は、バニラのデュランダル スターター キットの flickr モジュールで実行しているコードです。

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
                    }]
                });     
            });
        }

簡単な修正は、上記のコードの後でコントロールを遅延して再描画することです。

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

しかし、これはおそらくエレガントなソリューションではありません。

ビューが表示された後に、この種のコントロールの描画を処理するための Durandal の他のイベントはありますか?

4

1 に答える 1