Sablonok renderelése szövegből, fájlokból és URL-ekből a TEMPLATE-tel

Total.js 5 · total5@0.0.19 templatescontenttangular Total.js 5-tel lefuttatva

A TEMPLATE(source, model, [$]) egy Tangular sablont renderel, és promise-t ad vissza a szöveggel. A source lehet:

egy {{ ... }}-t tartalmazó szöveg: ez maga a sablon
a templates mappa egy fájljának neve: a TEMPLATE('invoice', model) a templates/invoice.html fájlt olvassa (az elején álló ~ a nevet abszolút úttá teszi)
egy http:// vagy https:// cím, amelyet a total5 forráskódja letölt (ezen az oldalon nem ellenőrizve)

A Ta a Tangular másik neve. A Tangular.render()-rel ellentétben a modell value néven érhető el: írja azt, hogy {{ value.name }}. Egy sablonfájl két olyan blokkot is hordozhat, amelyet a TEMPLATE beolvas és eltávolít a kimenetből: egy <script>-et, amely helpereket ad a Thelpers-hez, és egy <script type="text/json">-t az alapértelmezett modellel, amelyet akkor használ, ha nem adnak át modellt.

templates/invoice.html

<script>
	Thelpers.money = function(value) {
		return (value || 0).toFixed(2) + ' EUR';
	};
</script>
<script type="text/json">{ "customer": "Anonymous", "total": 0 }</script>
<h1>Invoice for {{ value.customer }}</h1>
<p>Total: {{ value.total | money() }}</p>

controllers/documents.js

exports.install = function() {
	ROUTE('GET /text/', text);
	ROUTE('GET /file/', file);
	ROUTE('GET /default/', withdefault);
	ROUTE('GET /absolute/', absolute);
	ROUTE('GET /alias/', alias);
};

async function text($) {
	$.plain(await TEMPLATE('Hello {{ value.name }}!', { name: $.query.name || 'world' }));
}

async function file($) {
	$.plain(await TEMPLATE('invoice', { customer: 'Ana', total: 12.5 }));
}

function alias($) {
	$.json({ same: Ta === Tangular, rendered: Ta.render('{{ name }}', { name: 'x' }) });
}

async function absolute($) {
	const file = require('path').join(__dirname, '..', 'templates', 'invoice.html');
	$.plain(await TEMPLATE('~' + file, { customer: 'Eva', total: 1 }));
}

async function withdefault($) {
	$.plain(await TEMPLATE('invoice'));
}