在XSL模板中包含带有冒号的JS语法

Question

我正在尝试使用Photo Sphere Viewer JS library为嵌入式360照片创建一个XSL模板(由Saxon处理器使用)。我遇到了一个问题，其中基本嵌入代码的一部分会导致模板中的致命错误：

我的示例XSL的相关部分：

<xsl:template name="myPanoramaTemplate">
<xsl:variable name="image" select="div/[@data-name='PanoImage']/img/@src"/>

<div id="viewer" style="width: 100vw; height: 100vh;"></div>
<script>
  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: '{$image}'
  });
</script>
<xsl:template>

这一直导致以下问题：

Fatal Error: QName cannot end with colon: {container:}
Fatal Error: QName cannot end with colon: {panorama:}

我尝试通过xsl:text、xsl:value-of和xsl:copy-of输出脚本文本，但没有成功。我需要找到一种方法让XSL成功地处理冒号，或者找到另一种方法来利用JS库，避免在这种上下文中使用冒号。有没有人遇到过类似的情况，以及任何解决方案或变通方法？

编辑:对于一个没有任何XSL变量的更简单的例子，我尝试了一个没有任何变量的测试模板。标记了与冒号有关的相同致命错误。

<xsl:template name="myPanoramaTemplate">
<script>
  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: 'path/to/panorama.jpg'
  });
</script>
</xsl:template>

Answer 1

作为Martin建议的替代方案，可以通过将大括号加倍来避开大括号。

这里发生的情况是，大括号之间的文本被解析为XPath表达式，这会失败，因为它不是有效的XPath语法。你可以这样写：

<script>
  var viewer = new PhotoSphereViewer.Viewer({{
    container: document.querySelector('#viewer'),
    panorama: '{$image}'
  }});
</script>

Answer 2

您可能希望/需要在文本结果元素script上应用xsl:expand-text="no"

<script xsl:expand-text="no">
  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: '<xsl:value-of select="$image"/>'
  });
</script>