Es gibt heutzutage viele datenbindende clientseitige Frameworks (Ember, Backbone, Knockout und Angular sind die bekannten, die mir bekannt sind).So werden vorgerenderte, datenbindbare Vorlagen bereitgestellt
Das Problem mit all diesen Frameworks ist die Anfangslast. Sie müssen Ihr HTML mit Platzhaltern markieren, und abhängig davon, wie es gemacht wird, sieht der Client entweder leere Seitenblöcke oder zufällige {{ markup }}. Außerdem werden die meisten dieser Templates clientseitig geparst und nicht vorkompiliert.
Wenn der Benutzer zum ersten Mal auf die Site kommt, würde er im Idealfall einen vorgerenderten HTML-Code mit allen ausgefüllten Daten erhalten, der ihnen etwas bietet, während alle vorkompilierten JavaScript-Vorlagen geladen und geladen werden die Datenbindungen treten ein. Von da an würde es Client-seitiges Routing verwenden und wir hätten nur JSON auf dem Draht.
Ich kann die Hälfte davon schon mit Jade oder einer Handvoll anderer Template-Sprachen machen, die serverseitig oder clientseitig gerendert werden können. Die Sache, die ich nicht herausfinden kann, ist, wie ich das gut mit einem dieser Frameworks spielen könnte.
Zum Beispiel in Knockout könnte Ihrer Ansicht nach wie folgt aussehen:
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
In Jade, ich würde die gleiche Vorlage wie folgt definieren:
p First Name
b= firstName
p Last Name
b= lastName
Which, für die Neugierigen, bekommt dazu kompiliert:
function anonymous(locals) {
var buf = [];
var locals_ = locals || {}, firstName = locals_.firstName, lastName = locals_.lastName;
buf.push("<p>First Name <b>" + jade.escape(null == (jade.interp = firstName) ? "" : jade.interp) + "</b></p><p>Last Name <b>" + jade.escape(null == (jade.interp = lastName) ? "" : jade.interp) + "</b></p>");
return buf.join("");
}
Welcher ist super schnell, um entweder Server- oder Klientenseite zu übertragen.
die Datenbindung an der Arbeit zu machen, würde ich habe jedoch doppelt um die Quelle zu annotieren: dort zweimal in zwei verschiedenen Formaten
p(data-bind='text: firstName') First Name
b= firstName
p(data-bind='text: lastName') Last Name
b= lastName
das heißt, jedes Platzhalter-Variable setzen.
(Zum Glück, die meisten dieser Frameworks nehmen irgendeine Art von JSON-Objekt für das View-Modell (glaube ich), die ich direkt an Jade dienen könnte oder Rahmen, so dass ein Teil kein Problem sein sollte.)
Ich möchte das sehr gerne vermeiden, aber ich kann mir nicht vorstellen, wie das möglich wäre, ohne meine eigene Template-Sprache zu schreiben, die stark vom Frontend-Framework abhängig ist.
Gibt es eine Möglichkeit, dies ohne viel Schmerz zu tun? Verwenden Sie eines der oben genannten Frontends oder eine JS-kompilierbare Templating-Sprache? Vielleicht über einige Plugins/Erweiterungen, anstatt sie auf einer Core-Ebene neu definieren zu müssen?