2013-12-11 34 views
0

我想在我的Durandal视图上使用ComponentOne的Wijmo图表控件。Durandal 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控件的脚本抛出,最有可能迪朗达尔是前提高附加事件正在显示视图。换句话说,在初始化过程中,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在视图显示后是否有任何其他事件处理这种控件绘图?

回答

1

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

好的。首先,从分支Version-2.1.0下拉最新的代码。我 只是推动了一个错误修复的入口过渡,打破 元素测量在附加的回调。更新之后,请再次尝试您的 代码,并告诉我是否可以解决您的问题。

此外,您不需要使用jQuery的文档准备 Durandal。 Durandal在准备好 之后才会执行任何应用代码。所以,不用担心这一点。