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

Question

我正在尝试使用Photo Sphere Viewer JS库为嵌入式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

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

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