如何在 javascript 函数中嵌入 xslt？答案

【问题标题】：How to embed xslt inside javascript functions?如何在 javascript 函数中嵌入 xslt？
【发布时间】：2012-03-11 23:57:45
【问题描述】：

我遇到了一个问题，需要我将 xml 中的元素传递给 xslt 文件中的 javascript 函数。

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="graphs.xsl.xml"?>

<charts num_charts="1">

   <chart type="pie" width="400" height="300" align="left" >
       <title>How Much Pizza I Ate Last Night</title>

       <columns>
            <column name="Topping" type="string"/>
            <column name="Slices"  type="number"/>      
       </columns>

       <rows>
            <row name="Mushrooms" value="3" />
            <row name="Onions" value="1" />  
            <row name="Olives" value="1" />       
            <row name="Zucchini" value="1" /> 
            <row name="Pepperoni" value="2" />         
       </rows>
   </chart>

</charts>

我需要将列和行传递到使用 google api 实现饼图的 xslt 文件中

<?xml version="1.0" encoding="utf-8"?> 
<xsl:stylesheet version="1.0"  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > 
<xsl:output method="html"/> 
<xsl:template match="/charts"> 
<html> 
  <head> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 

    <script type="text/javascript"> 
      google.load("visualization", "1", {packages:["corechart"]}); 
      google.setOnLoadCallback(drawChart); 
      function drawChart() { 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');

            data.addRows([
              ['Mushrooms', 3],
              ['Onions', 1],
              ['Olives', 1],
              ['Zucchini', 1],
              ['Pepperoni', 2]
            ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        var chart = new 
            google.visualization.PieChart(document.getElementById('chart_div')); 
        chart.draw(data, options); 
      } 
    </script> 
  </head> 
  <body> 
    <div id="chart_div"></div> 
  </body> 
</html> 
</xsl:template> 


</xsl:stylesheet>

我需要使用 foreach 将列和行从 xml 传递到 xslt 文件，而不是使用 data.addColumn 和 data.addRows。我怎样才能做到这一点？

【问题讨论】：

标签： javascript xml xslt

【解决方案1】：

就 xslt 而言，javascript 只是文本，它仅在 xslt 完成构建 html 页面后执行，因此类似于以下内容会生成与您显示的代码等效的文档。（我在您原来的 google.com/jsapi 上收到错误，我没有调试）

<?xml version="1.0" encoding="utf-8"?> 
<xsl:stylesheet version="1.0"  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > 

<xsl:template match="/charts" xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
  <head> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
      google.load("visualization", "1", {packages:["corechart"]}); 
      google.setOnLoadCallback(drawChart); 
      function drawChart() { 
        var data = new google.visualization.DataTable(); 
<xsl:for-each select="chart/columns/column">
        data.addColumn(<xsl:text/>
  <xsl:text>'</xsl:text>
  <xsl:value-of select="@type"/>
  <xsl:text>', '</xsl:text>
  <xsl:value-of select="@name"/>
  <xsl:text>');</xsl:text>
</xsl:for-each>

            data.addRows([
<xsl:for-each select="chart/rows/row">
       <xsl:if test="position()!=1">, &#10;</xsl:if>
       <xsl:text>['</xsl:text>
       <xsl:value-of select="@name"/>
       <xsl:text>, </xsl:text>
       <xsl:value-of select="@value"/>
<xsl:text>]</xsl:text>
</xsl:for-each>
]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        var chart = new 
            google.visualization.PieChart(document.getElementById('chart_div')); 
        chart.draw(data, options); 
      } 
    </script> 
  </head> 
  <body> 
    <div id="chart_div"></div> 
  </body> 
</html> 
</xsl:template> 


</xsl:stylesheet>

【讨论】：