2012-06-07 11 views
7

Ho XML come questo:Trasformazione dell'XML in HTML: best practice?

<Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> 

che ho bisogno di usare nel markup HTML:

<a href="#" data-name="Syd Mead" data-id="3412" 
    data-ntrack="28" data-pop="8" 
    class="pop-8"><span>Syd Mead</span></a> 

Qual è il modo "giusto" di fare questo per la più ampia gamma di browser? Questo può essere fatto in modo affidabile con una trasformazione XSLT? È meglio usare una regex (improbabile) o devo analizzare l'xml, e per ogni tag <Artist> leggere ogni attributo e fare manualmente document.createElement e setAttribute?

I tag <Artist> sono in un nodo genitore, ce ne sono molti. C'è una buona pratica per questo?

+0

Sì, questo può essere fatto in un modo molto compatto ed elegante con XSLT. –

risposta

5

Questo sembra un candidato perfetto per XSLT - l'XML è pulito & ben formato. Se sei preoccupato per la compatibilità del browser, perché non eseguire la trasformazione sul lato server?

Questa XSLT trasformerà i dati - è possibile verificare che here: i dati

Fonte:

<Artists> 
    <Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> 
</Artists> 

XSLT:

<?xml version="1.0" encoding="ISO-8859-1"?> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:template match="/"> 
    <xsl:for-each select="Artists/Artist"> 
     <a href="#"> 
      <xsl:attribute name="data-id">  
       <xsl:value-of select="@id"/> 
      </xsl:attribute> 
      <xsl:attribute name="data-ntrack">  
       <xsl:value-of select="@ntrack"/> 
      </xsl:attribute> 
      <xsl:attribute name="data-pop">  
       <xsl:value-of select="@pop"/> 
      </xsl:attribute> 
      <xsl:attribute name="data-name">  
       <xsl:value-of select="@name"/> 
      </xsl:attribute> 
      <xsl:attribute name="class">  
       <xsl:value-of select="concat('pop-',@pop)"/> 
      </xsl:attribute> 

      <span><xsl:value-of select="@name"/></span> 
     </a> 
    </xsl:for-each> 
</xsl:template> 
</xsl:stylesheet> 

non ho fatto questo sul lato client , quindi sfortunatamente non posso parlare per la compatibilità del browser.

+0

Lato server non un'opzione. Quindi, quale aspetto avrebbe l'XSLT trasformare?Ed è la sintassi XSLT tale che lo stesso codice potrebbe funzionare per i browser principali (IE7 +, Chrome, Firefox, Safari). – artlung

+0

@artlung - aggiornato con xslt appropriato. –

+0

@SimonMcKenzie - Non dimenticare l'attributo 'class'. –

2

Ecco un'altra opzione foglio di stile XSLT che è più semplice, a mio parere:

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

    <xsl:template match="/*/Artist"> 
     <a href="#" class="pop-{@pop}"> 
      <xsl:apply-templates select="@*"/> 
      <span><xsl:value-of select="@name"/></span> 
     </a>   
    </xsl:template> 

    <xsl:template match="@*"> 
     <xsl:attribute name="data-{name()}"> 
      <xsl:value-of select="."/> 
     </xsl:attribute> 
    </xsl:template> 

</xsl:stylesheet> 

input XML

<Artists> 
    <Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> 
</Artists> 

uscita HTML

<a class="pop-8" href="#" data-name="Syd Mead" data-id="3412" data-ntrack="28" data-pop="8"> 
    <span>Syd Mead</span> 
</a> 
5

Ecco una semplice (senza condizionali, senza modelli aggiuntivi, senza xsl:attribute, no xsl:for-each), breve e completa trasformazione:

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
<xsl:output omit-xml-declaration="yes" indent="no"/> 

<xsl:template match="Artist"> 
    <a href="#" data-name="{@name}" 
       data-id="{@id}" 
       data-ntrack="{@ntrack}" 
       data-pop="{@pop}" 
       class="pop-{@pop}"> 
    <span><xsl:value-of select="@name"/></span> 
    </a> 
</xsl:template> 
</xsl:stylesheet> 

Quando questa trasformazione viene applicata sul documento XML fornito:

<Artist name="Syd Mead" id="3412" ntrack="28" pop="8"/> 

The Wanted, risultato corretto è prodotta:

<a href="#" data-name="Syd Mead" data-id="3412" data-ntrack="28" data-pop="8" class="pop-8"><span>Syd Mead</span></a> 

Spiegazione: L'uso corretto di AVT (attributo value Templates)

+0

Questa mi sembra una soluzione molto più valida in questo caso , soprattutto per la sua sintassi concisa che somiglia molto ai modelli nei moderni framework web. –

+1

@LayZee, Sì, sono completamente d'accordo :). Prego. –