在javascript中使用应用模板

时间:2014-02-26 08:50:20

标签: javascript html xml xslt

我正在尝试创建一个在谷歌地图上显示personell的html页面。要在地图上创建不同的标记,我有一个javascript,它为数组位置中的每个条目创建一个标记。该数组应该填充来自db(以xml为单位)的数据,并且必须转换为我的html。

请查看我的xsl:

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
    <head>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"></script>
    <script type="text/javascript">
        var infos = [];
        var locations = [
            <xsl:apply-templates select='//rows'/>
        ];
        function initialize() {
            var myOptions = {
                center: new google.maps.LatLng(50.59, 4.35),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("default"),myOptions);
            setMarkers(map,locations)
            }
        function setMarkers(map,locations){
            var marker, i
            for (i = 0; i < locations.length; i++)
            {   var name = locations[i][0]
                var long = locations[i][1]
                var lat = locations[i][2]
                var contentmarker =  locations[i][3]
                latlngset = new google.maps.LatLng(lat, long);
                var marker = new google.maps.Marker({
                    map: map, title: name , position: latlngset
                });
                map.setCenter(marker.getPosition())
                var content = contentmarker
                var infowindow = new google.maps.InfoWindow()
                google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
                    return function() {
                    /* close the previous info-window */
                    closeInfos();
                    infowindow.setContent(content);
                            infowindow.open(map,marker);
                            /* keep the handle, in order to close it on next click event */
                            infos[0]=infowindow;
                    };
                })(marker,content,infowindow)); 
            }
        }
        function closeInfos(){
            if(infos.length &gt; 0){
                /* detach the info-window from the marker ... undocumented in the API docs */
                infos[0].set("marker", null);
                /* and close it */
                infos[0].close();
                /* blank the array */
                infos.length = 0;
            }
        }
        </script>
    </head>
    <body onload="initialize()">
        <div id="default" style="width:100%; height:100%"></div>
    </body>
</html>
</xsl:template>
<xsl:template match='rows'>
<xsl:for-each-group select='row' group-by='@SiteNr'>
    [&apos;<xsl:value-of select='@SiteName'/>&apos;, &apos;<xsl:value-of select='@LON_R'/>&apos;, &apos;<xsl:value-of select='@LAT_R'/>
    &apos;, &apos;&lt;b&gt;<xsl:value-of select='@RegionName'/>&lt;/b&gt;&lt;br&gt;Details (<xsl:value-of select='@SiteNr'/>):
    <table border='1'>
        <tr>
            <th>PersNr</th>
            <th>Name</th>
            <th>Firstname</th>
            <th>DeptNr</th>
            <th>DeptName</th>
            <th>PostNr</th>
        </tr>
        <xsl:for-each select="current-group()">
            <xsl:apply-templates select="."/>
                <tr>
                    <td><xsl:value-of select="@PersNr"/></td>
                    <td><xsl:value-of select="@Name"/></td>
                    <td><xsl:value-of select="@FirstName"/></td>
                    <td><xsl:value-of select="@DeptCode"/></td>
                    <td><xsl:value-of select="@DeptName"/></td>
                    <td><xsl:value-of select="@PostNr"/></td>
                </tr>
        </xsl:for-each>
        <tr>
            <td colspan='5'>TOTAAL</td>
            <td align='center'><xsl:value-of select="(count(current-group()/@PersNr))"/></td>
        </tr>
    </table>&apos;] 
</xsl:for-each-group>
</xsl:template>
</xsl:stylesheet>

如果我在脚本周围尝试CDATA,它会运行,但我的脚本标签会被转换为&lt;和&gt;并且脚本不再起作用了。

我的xml摘录:

<rows>
    <row PersNr="B15975" Name="Vandendriessche" Firstname="Rudolf" DeptCode"J20100" DeptName="HR" Post="1230" RegionNum="3" RegionName="Plateau Berlaar" SiteNum="11002D" SiteName="KW BELGIELEI" LON_kw="4.418" LAT_kw="51.205" /> 

我是XSL / HTML / JAVASCRIPT的新手,所以如果你知道答案,请帮我一些额外的信息(如果你能提供的话)。

1 个答案:

答案 0 :(得分:0)

首先,您需要替换此行

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&amp;sensor=false"></script>

请注意,&需要如何&amp;

进行转义

为了让你的javascript在构建完成后工作,你可以手动转义所有有问题的字符。在您的情况下,这意味着替换此行

for (i = 0; i < locations.length; i++)

使用此行

for (i = 0; i &lt; locations.length; i++)

这是为了阻止XML解析器将<视为标记的开头。

或者,您可以将文本换行为CDATA,但您需要在两个地方执行此操作。在 xsl:apply-templates 之前和之后。例如,你可以这样做

<script type="text/javascript">
  <![CDATA[
    var infos = [];
    var locations = [
  ]]>
  <xsl:apply-templates select='//rows'/>
  <![CDATA[
    ];
    function initialize() {
    }
  ]]>
 </script>