如何通过 XSLT 生成具有 Alpine.js 扩展的 HTML。

huangapple go评论51阅读模式
英文:

How to generate html with alpine.js extensions via xslt

问题

我尝试基于 alpine.js 生成单页面应用程序。
HTML 应通过 XSLT 从 XML 描述生成。

所需输出的示例。

<div @notify="alert('Hello World!')">
<button @click="$dispatch('notify')">
Notify
</button>
</div>


我尝试通过 xsl 生成这个:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" />

<xsl:template match="test">
<div>
<xsl:attribute name="@notify">
<xsl:text>alert('Hello World!')</xsl:text>
</xsl:attribute>
<button>
<xsl:attribute name="@click">
<xsl:text>$dispatch('notify')</xsl:text>
</xsl:attribute>
Notify
</button>
</div>
</xsl:template>

</xsl:stylesheet>


输入的 XML:

<?xml version="1.0"?>
<test/>


结果:

`在 alpina.xsl 第8行第39列的 xsl:attribute/@name 处出现错误:
  XTDE0850  属性名称 {@notify} 不是有效的 QName`
英文:

I try to generate a single page application based on alpine.js.
The HTML should be generate form XML descriptions via XSLT.

Example for required output.

&lt;div @notify=&quot;alert(&#39;Hello World!&#39;)&quot;&gt;
    &lt;button @click=&quot;$dispatch(&#39;notify&#39;)&quot;&gt;
        Notify
    &lt;/button&gt;
&lt;/div&gt;

My try to generate this via xsl:

&lt;?xml version=&quot;1.0&quot;?&gt;
&lt;xsl:stylesheet version=&quot;1.0&quot;
   xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot;&gt;
  &lt;xsl:output method=&quot;html&quot;  indent=&quot;yes&quot; /&gt;

  &lt;xsl:template match=&quot;test&quot;&gt;
    &lt;div&gt;
        &lt;xsl:attribute name=&quot;@notify&quot;&gt;
            &lt;xsl:text&gt;alert(&#39;Hello World!&#39;)&lt;/xsl:text&gt;
        &lt;/xsl:attribute&gt;
        &lt;button&gt;
            &lt;xsl:attribute name=&quot;@click&quot;&gt;
                &lt;xsl:text&gt;$dispatch(&#39;notify&#39;)&lt;/xsl:text&gt;
            &lt;/xsl:attribute&gt;
             Notify
         &lt;/button&gt;
    &lt;/div&gt;
  &lt;/xsl:template&gt;

&lt;/xsl:stylesheet&gt;

Imput XML:

&lt;?xml version=&quot;1.0&quot;?&gt;
&lt;test/&gt;

Result:

Error in xsl:attribute/@name on line 8 column 39 of alpina.xsl:
XTDE0850 Attribute name {@notify} is not a valid QName

答案1

得分: 2

我不了解 Alpine.js,但我们在其他类似“XML样式”或“类似HTML”格式的问题中也遇到过类似的问题。

XSLT适用于XDM数据模型,该模型定义了诸如元素和属性之类的概念,并为内容定义了规则,例如元素和属性名称的规则(不允许它们以“@”开头)。如果你想生成类似你展示的输出,首先需要使用XDM数据模型定义此内容的表示。这可能包括将XDM属性名称映射到 Alpine 属性名称(例如,你可以使用XDM属性名称 __notify 来表示 Alpine 属性名称 @notify)。

然后 (a) 你的样式表将生成一个名为 __notify 的XDM属性,和 (b) 你需要一个自定义序列化方法,将 __notify 序列化为 @notify

Saxon的序列化机制是高度可定制的。如果你希望完全整合此功能,可以在Saxon的 Configuration 中注册一个 SerializerFactory,注册一个用户定义的序列化方法,并使用XmlEmitter或HtmlEmitter的子类来自定义输出。例如,你可以重写 writeAttribute 方法,以便将 __notify="xxxx" 输出为 @notify="xxxx"

英文:

I don't know alpine.js, but we see similar problems with other "XML-like" or "HTML-like" formats.

XSLT works on the XDM data model, which defines concepts such as elements and attributes, and defines rules for the content, for example rules for element and attribute names (which don't allow them to start with "@"). If you want to generate something like the output you have shown, you first need to define a representation of this content using the XDM data model. This might include a mapping from XDM attribute names to alpine attribute names (for example, you could use the XDM attribute name __notify to represent the alpine attribute name @notify).

Then (a) your stylesheet would generate an XDM attribute named __notify, and (b) you would need a custom serialization method that serialises __notify as @notify.

The Saxon serialization machinery is highly customizable. If you want to integrate this fully, you could register a SerializerFactory with the Saxon Configuration, that registers a user-defined serialization method, and uses a subclass of XmlEmitter or HtmlEmitter to customize the output. For example you could override the writeAttribute method so it outputs __notify=&quot;xxxx&quot; as @notify=&quot;xxxx&quot;.

huangapple
  • 本文由 发表于 2023年2月7日 03:02:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/75365521.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定