XSLT - 将Javascript放在DOM的末尾

时间:2016-12-13 11:29:28

标签: javascript xml xslt dom

我有一些JavaScript代码,目前直接在DOM中打印。

就像那样:

    <div id="a" class="widget"></div>
    <script>$('#a').animate()</script>
    <div id="b" class="widget"></div>
    <script>$('#b').animate()</script>
</body>

我想将所有JavaScript部分放在DOM的末尾而不会过多地改变我的所有XSL / JavaScript。有可能吗?

    <div id="a" class="widget"></div>
    <div id="b" class="widget"></div>
    <script>$('#a').animate()</script>
    <script>$('#b').animate()</script>
</body>

我的第一次尝试是使用Java String Object并将其传递给我的所有模板。

<xsl:variable name="footerPlaceholder" select="String:new()"/>
<xsl:apply-templates select="item">
  <xsl:with-param name="footerPlaceholder" select="$footerPlaceholder" />
</xsl:apply-templates>
<xsl:value-of select="String:toString($footerPlaceholder)"/>

<xsl:template match="item">
  <xsl:param name="footerPlaceholder" />
  <xsl:value-of select="String:concat($footerPlaceholder, 'test')"/>
  <xsl:value-of select="String:toString($footerPlaceholder)"/>
</xsl:template>

这似乎不起作用。最终toString始终为空,模板中的toString仅包含一个test

编辑:

我在这里添加一个基本示例。显然它非常简单,所以我可以为小部件创建两个模板。一个渲染和一个JavaScript。我不能在真正的应用程序中这样做,这将是太多的工作。

XML

<root>
<widget id="a"></widget>
<widget id="b"></widget>
</root>

XSLT

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="2.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/root">
        <body>
                <xsl:apply-templates select="./widget" mode="render" />
        </body>
    </xsl:template>

    <xsl:template match="widget" mode="render">
        <div id="{@id}" class="widget"></div>
        <script>$('#<xsl:value-of select="@id" />').animate()</script>
    </xsl:template>
</xsl:stylesheet>

最终解决方案(感谢Martin)

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="2.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">

  <xsl:template match="/root">
    <body>
      <xsl:variable name="body">
        <xsl:apply-templates select="./widget" mode="render" />
      </xsl:variable>
      <xsl:apply-templates select="$body" mode="no-script" />
      <xsl:copy-of select="$body//script" xpath-default-namespace="http://www.w3.org/1999/xhtml"/>
    </body>
  </xsl:template>

  <xsl:template match="script" mode="no-script">
  </xsl:template>

  <xsl:template match="*[not(self::script)] | @*" mode="no-script">
    <xsl:copy  xpath-default-namespace="http://www.w3.org/1999/xhtml">
      <xsl:apply-templates select="node()[not(self::script)] | @*"  mode="no-script"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="widget" mode="render">
    <div id="{@id}" class="widget"></div>
    <div>
      <script>$('#<xsl:value-of select="@id" />').animate()</script>
    </div>
  </xsl:template>
</xsl:stylesheet>

1 个答案:

答案 0 :(得分:1)

假设使用XSLT 2.0

<xsl:stylesheet version="2.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/root">
        <body>
            <xsl:variable name="widgets">
                <xsl:apply-templates select="./widget" mode="render" />
            </xsl:variable>
            <xsl:copy-of select="$widgets/div, $widgets/script"/>
        </body>
    </xsl:template>

    <xsl:template match="widget" mode="render">
        <div id="{@id}" class="widget"></div>
        <script>$('#<xsl:value-of select="@id" />').animate()</script>
    </xsl:template>
</xsl:stylesheet>