Durandal Wijmo问题

Question

我试图在我的Durandal视图上使用ComponentOne的Wijmo图表控件。

我试图在模块js中加载“附加”事件的图表控件。“图表”控件似乎没有呈现，而是引发了以下错误：

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中是否还有其他事件来处理这种控件的绘图？

Answer 1

最近的2.1节讨论了这一问题。杜兰达尔支部。以下是@EisenbergEffect https://github.com/BlueSpire/Durandal/issues/406#issuecomment-30340696的引文

好的。首先，从分支版本2.1.0中提取最新代码。我刚刚为入口转换推出了一个bug修复程序，它破坏了在附加回调中测量的元素。在您更新之后，再次尝试您的代码并让我知道这是否解决了您的问题。 另外，您不需要在Durandal内部使用jQuery的文档。杜兰达尔不执行任何应用程序代码，直到它准备好。所以没必要担心这个。