Zurechtgezwirbelt: Mit Mustache zur dynamischen Single-Page-App
Seite 2: Hilfsfunktionen im Überblick
In diesem Abschnitt ist der Code für die gewünschten Funktionen enthalten. Sie sind als beispielhaft zu verstehen und können je nach Anwendungsfall auch anders gelagert sein.
HTTP-Client
Eine SPA kann die Funktion http_call einsetzen, um Funktionen auf dem Server aufzurufen und deren Antwort zu verarbeiten. Beispiele finden sich unter „Inhalte abrufen“ und unter „Vorlagen verwalten“.
function http_call(method, url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
callback(this.responseText);
}
};
xhr.open(method, url);
if (method === 'GET') {
xhr.send();
}
else if (method === 'POST' || method === 'PUT' ||
method === 'DELETE') {
xhr.setRequestHeader('Content-type',
'application/x-www-form-urlencoded');
xhr.send(data);
}
}Vorlagen verwalten
Diese wenigen Zeilen Code können HTML-Vorlagen einer App in einem Cache verwalten und rufen Mustache zum Erzeugen von HTML aus JSON-Inhalten auf:
var cache = new Array(); // vorlagen-cache
function html_erzeugen(vurl, inhalt, cb) {
var vorlage = cache[vurl];
if (vorlage === undefined) {
self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
} else {
self.vorlage_fuellen(vurl, inhalt, cb);
}
}
function vorlage_fuellen(vurl, inhalt, cb) {
cb(Mustache.render(cache[vurl], inhalt));
}
function vorlage_laden_und_fuellen(vurl, inhalt, cb) {
http_call('GET', vurl, '', function(antwort) {
cache[vurl] = antwort;
vorlage_fuellen(vurl, inhalt, cb);
});
}Im Parameter vurl steht die URL einer Vorlage. Der Parameter inhalt dient dazu, den Inhalt vom Server in „geparstem“ JSON zu übermitteln, wie in JSON.parse(serverantwort) vorgesehen. Im Parameter cb erfolgt die Übergabe einer Callback-Funktion, die das von Mustache erstellte HTML zurückerhält.
