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 の他のイベントはありますか?