HTML templates für JavaScript mit Nano

Vor kurzem Stand ich vor einer Aufgabe, die sicherlich schon so gut wie jeder Entwickler kennt: Ich musste ein definiertes Stück HTML als Template nutzen, um es mehrfach auf der Seite zu platzieren. Soweit erstmal kein Problem – anstrengend wird es dann, wenn man Platzhalter innerhalb des Templates dynamisch austauschen möchte.

Mit dem Mini-Stückchen an JavaScript-Code von Nano ist das aber kein Problem. Im folgenden möchte ich die 9 Zeilen (ja, wirklich nur neun Zeilen – und das nichtmal minified) etwas schmackhaft machen.

Als erstes definiert ihr ein Template. Für mich war es glaube ich das erste Mal, dass ich einen anderen Typen als text/javascript im Script-Tag verwendet habe.

<script type="text/html" id="product_template">
    <div id="product-{product.sku}" class="sidebarproduct">
	    <h4>{product.name}</h4>
	    <img src="{product.thumbnail}" alt="{product.name}" />
	    <ul>
	        <li>ArtNr.: {product.sku}</li>
	        <li>Preis: {product.price} €</li>
	    </ul>
	    <p>{product.description}</p>
    </div>
</script>

Das war es eigentlich auch schon – der Vollständigkeit halber hier noch der Ajax-Call:

$.ajax({
    type: 'POST',
    url: 'http://meineurl.de',
    dataType: 'json',
    success: function(responseData, textStatus, jqXHR)
    {
        if (responseData.status == 'ok') {
            $('.sidebar').append(nano($('#product_template').html(), responseData));
        }
    },
    error: function (responseData, textStatus, errorThrown)
    {
        console.warn(responseData, textStatus, errorThrown);
    }
});

Das zurückgelieferte JSON ist denkbar einfach aufgebaut:

{
	product: {
		entity_id: "295",
		entity_type_id: "4",
		attribute_set_id: "4",
		type_id: "simple",
		...
	}
}

Natürlich gibt es tausende von Template-Lösungen am Markt. Ich habe etwas länger suchen müssen, bis ich eine so schlanke Lösung gefunden habe, die genau das tut was ich möchte, und dabei auf sämtliche Frameworks verzichtet.