0

我正在尝试在我的 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 中没有布局。

下面是我在 vanilla Durandal Starter Kit 的 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

1

这已在最新的 2.1 中得到解决。杜兰达尔的分支。这是来自@EisenbergEffect https://github.com/BlueSpire/Durandal/issues/406#issuecomment-30340696的引用

好的。首先，从分支 Version-2.1.0 拉取最新代码。我刚刚为在附加回调中破坏元素测量的入口转换推送了一个错误修复。更新后，再次尝试您的代码，让我知道这是否为您解决了问题。

此外，您不需要在 Durandal 内部使用 jQuery 的文档。Durandal 在准备好之前不会执行任何应用程序代码。所以，不必担心这一点。

于 2013-12-11T22:34:27.050 回答