2010-12-16 46 views
0

我在小工具的xml文件中看到,我在其中編寫視圖部分以創建始終與每個小工具相同的代碼的圖表,是否可以使其更清晰?像創建一個外部JavaScript文件來導入?可能外部文件的問題是獲取數據。Jira Gadget Plugin - Javascript DRY

這裏是代碼:

view: { 
         enableReload: true, 
         onResizeReload: true, 
         onResizeAdjustHeight: true, 
         template: function (args) { 
          var gadget = this; 
          gadget.getView().empty(); 
          gadget.projectOrFilterName = args.chart.filterName; 

          var container = AJS.$("<div id='chart_div'/>"); 
          gadget.getView().append(container); 

          if(args.chart.data && args.chart.data.length > 0) { 
           var data = new google.visualization.DataTable(); 
           data.addColumn('string', this.getMsg("gadget.user.activity.time.label")); 
           data.addColumn('number', this.getMsg("gadget.user.activity.issues.solving.label")); 
           data.addColumn('number', this.getMsg("gadget.user.activity.sum.label")); 
           data.addRows(args.chart.data); 

           switch(gadget.getPref("chartType")) 
           { 
            case "ColumnChart": 
             var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
             break; 
            case "AreaChart": 
             var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
             break; 
            case "LineChart": 
             var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
             break; 
           } 

           var width = gadgets.window.getViewportDimensions().width; 
           var height = width * 3/4; 
           chart.draw(
            data, 
            {width: width, height: height, 
            curveType: "function", 
            legend: 'bottom', 
            backgroundColor:{fill:'#DDE8FF'}, 
            vAxis: { textStyle:{fontSize:10}, 
              baseline:0, 
              baselineColor:'#9F0000'}, 
            hAxis: {textStyle:{fontSize:10}, 
              slantedText:'true', 
              slantedTextAngle:45}, 
            colors:['#566D7E','orange'], 
            fontName:'Trebuchet MS', 
            pointSize: 2 
           }); 
          } 
          else { 
           gadget.getView().append("<p>No Data available</p>"); 
          } 

          gadget.resize(); 
         }, 

回答

1

你應該包括你自己的JS在你Atlassian的-plugin.xml的那樣:

<!-- GADGET WEB RESOURCES --> 
    <web-resource key="resources"> 
    <resource type="download" name="javascript/common.js" location="javascript/MyCustomLibrary.js"> 
     <property key="content-type" value="text/javascript"/> 
    </resource> 
    <!-- ... --> 
    </web-resource> 

,然後,將其添加在plugin.xml

#requireResource("plugin-key:resources") 

最後,從您的小工具對象視圖部分調用你的JS功能:

CustomFunction(gadget, data); 

希望能對你有所幫助, 關心。