JavaScript [Backbone] Wo steht der HTML-Code für ein View?

Timdaroxxa

Lieutenant
Registriert
März 2009
Beiträge
954
Hey Leute,

kurze und simple Frage: Wo sollte der HTML-Code für ein Backbone- oder auch allgemeinen View stehen?
Schreibt ihr den HTML Code direkt ins Javascript und fügt dann dann z.B. mit Jquery .append oder .html ein, oder kopiert ihr einen versteckten Prototyp aus dem HTML- Code?
Oder gibts andere Ansätze?

Gerne auch einfach Links oder Suchbegriffe posten. Ich wusste nicht nach was genau ich suchen muss, um Artikel zu diesem Thema zu finden!
 
Genau damit beschäftige ich mich auch aktuell (für eine recht große Single-Page-App) ;)
Letztendlich will man irgendwo seine Javascript Templates herbekommen und mit Daten (aus dem Model) befüllen.
Hier mal ein paar Ansätze (Strings direkt im Javascript lasse ich mal weg, denn das will keiner :D):

Inline-Ansatz: Man schreibt die Templates in <script> Blöcke direkt ins HTML und zieht das innerHTML dann durch die Template Funktion.

JST-Ansatz: Hier baut man sich meistens ein großes Objekt in das alle Template-Funktionen reingesteckt werden. Im View wählt man dann einfach die entsprechende Funktion aus dem JST-Objekt und schickt da die Daten durch.

AMD-Ansatz: Man läd die Templates "dynamisch" nach z.B. mit RequireJS.

Hier sind auch mal ein paar Code-Beispiele.
Alle Ansätze funktionieren, es hängt also von deinen Anforderungen ab.
Die Templates Inline ins HTML zu stecken skaliert nicht gut und ist zum Entwickeln auch nicht sehr angenehm. Der AMD-Ansatz macht erst bei sehr großen Anwendungen und hunderten von Views Sinn.

Der Backbone Erfinder verwendet auf seiner DocumentCloud-Seite einen JST-Ansatz. Steht hier. Es gibt einige Build-Tools die einem viel Handarbeit abnehmen können.

Ich verwende aktuell Grunt (das läuft über nodejs, ist also alles Javascript). Mit diesem Plugin Kompiliere ich die Templates (aus einzelnen Dateien) in eine JS Datei. Das "vorkompilieren" muss man nicht machen, aber da sich die Templates eh nicht ändern und meine Anwendung auf Mobil-Geräten vernünftig laufen soll, nehme ich die Rechenarbeit da einfach vom Client in den Build-Prozess.

Das fertige HTML in der Render-Funktion in die Seite hinein zu bekommen ist noch mal ein anderes Thema. Das hängt auch davon ab wie man seine Seite aufbaut (verschachtelte Views etc.).
So, ich hoffe das gibt einen Überblick.
 
Zurück
Oben