Beste Möglichkeit, mehrere jQuery-Vorlagen in einem einzigen xHttpRequest zu packen?

Question

Update: nach einem weiteren Tag der in diese Frage zu graben, ich habe festgestellt, dass die aktuelle jQuery-Vorlage lib keine Möglichkeit bietet, dies zu tun. this article beschreibt einen guten Ansatz.

Ich würde noch gerne von irgendwelchen zusätzliche Gedanken dazu hören, dies zu tun. Der Artikel, der oben verknüpft wird, erfordert, dass die zurückgegebene Zeichenfolge von Vorlagen in dem DOM eingefügt wird. Scheint so, als ob das DOM hieraus verlassen würde, wäre ideal, und weniger Overhead auf dem Browser. Stellen Sie sich eine große Seite vor, mit mehrere zusammengesetzte Vorlagen, die nicht verwendet werden können. Obwohl, vielleicht weil die Vorlagen in einem Skript Tag umschlossen sind, gibt es nur ein einzelnes DOM-Element pro Vorlage? Kommen Sie, lassen Sie uns einige Gedanken hören ...

jQuery template libs benutzen, was ist der beste Weg, um mehrere, verwandte, relativ kleine Vorlagen miteinander zu kombinieren? Benötigen Sie für jede einzelne Vorlage einen einzelnen <script>-Tag? Was ist, wenn Sie diese Vorlagen dynamisch über AJAX ziehen? Kann ich diese Vorlagen irgendwie kombinieren?

Beachten Sie Folgendes:

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "#titleTemplate"}} 
    <tr class="detail"><td>Director: ${Director}</td></tr> 
</script> 

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${Name}</td></tr> 
</script> 

Nun, da diese beiden Vorlagen sind sehr eng miteinander verwandt (und man hängt von der anderen Seite) wäre es sinnvoll, diese in einem einzigen AJAX-Aufruf zu konsolidieren, und bekommen sie beide Einmal. Ich habe ein paar Ideen, aber ich würde gerne wissen, ob es einen gemeinsamen/besten Weg gibt, dies zu tun? Zur Zeit ziehe ich in einem Stück von HTML, und dann einen .find tun() die spezifische peice von HTML für eine Vorlage zu erhalten ... zB:

var templatePackage = fancyAjaxCalltoGetTemplates(); 

„templatePackage“ dann könnte wie folgt aussehen:

<div id="templatePkg"> 
    <div id="movieTemplate"> 
    {{tmpl "#titleTemplate"}} 
     <tr class="detail"><td>Director: ${Director}</td></tr> 
    </div>  

    <div id="titleTemplate"> 
    <tr class="title"><td>${Name}</td></tr> 
    </div> 
</div> 

dann könnte ich tun:

var titleTemplate = jQuery.template('titleTemplate', $(templatePackage).find('#titleTemplate')); 

und

var movieTemplate = jQuery.template('movieTemplate', $(templatePackage).find('#movieTemplate')); 

... lass mich wissen, was du denkst ... was würdest du tun?

Answer 1

OK, ich habe den Artikel gelesen, auf den Sie in diesem Post verweisen. Wie ich es sehe, ist sein Weg wahrscheinlich eine der besten Möglichkeiten, die Vorlagenseite (n) zu laden. Das Einzige, was ich nicht mag, sind die asynchronen Probleme, die auftreten können, vor allem. Wenn Sie sofort ein Templating durchführen müssen, bevor die asynchronen get-Ergebnisse zurückgegeben werden, sowie alle Bindungsprobleme, die auftreten können, bevor etwas zurückgegeben wird. In mehreren Projekten habe ich getan, was ich nutze, um seinen „alter“ SSI (Server Side Includes), aber ich benutze nur etwas noch einfacher wie:

<% Response.WriteFile("this_page_template_file.html"); %>

Sie es überall hinstellen könnten, wo Sie einen Tag legen würden. Wie er sagt, fügen Sie einfach nur die Vorlagen ein, die Sie benötigen, oder fügen Sie zwei Vorlagen hinzu: eine ist eine "Basis" -Schablone mit häufig verwendeten Elementen und die zweite hat die seitenspezifischen mit Vorlagenreferenzen {{tmpl}} .

Ist das schon nahe an einer Antwort? ;-)

Answer 2

[Zunächst einmal, große Frage. Ich liebe dieses Thema]

Ich habe keine Erfahrung mit dem Plugin "jquery-template-libs", aber es gibt eine bestimmte leichte Javascript Template Plugins, die fast ein Standard werden und spielt sehr schön mit jQuery, die wahrscheinlich besser ist geeignet für die Aufgabe als JTL, Schnurrbart:

https://github.com/janl/mustache.js

Es ist etwas bekam, die eine „teilweise“, die im wesentlichen ein Weg ist, genannt zu kleineren Vorlagen innerhalb einer anderen umfassen. Was so klingt, wird dir sehr helfen.

Obendrein gibt es eine Bibliothek ICanHaz.js genannt:

http://icanhazjs.com/

ICanHaz Schnurrbart im Wesentlichen erstreckt sich für Vorlagen und arbeitet unglaublich gut in der Funktionalität gebaut umfassen.

Moustache/ICanHaz können Sie Vorlagen nach Variablen, durch einen JSON-Aufruf oder mithilfe von Tags hinzufügen. Es ist deine Entscheidung.

Answer 3

Ich weiß, dass dies eine alte Frage ist, aber Sie sollten vielleicht einen Blick auf Closure-Templates werfen. Sie bieten die gewünschte Funktionalität und den zusätzlichen Vorteil, dass sie zur Kompilierungszeit in JavaScript kompiliert werden und nicht zur Laufzeit im Browser jedes Benutzers.

Wenn Sie sich entscheiden, mit ihnen zu arbeiten, dann würde ich empfehlen, plovr für den Aufbau verwenden.

Answer 4

Ich mag den referenzierten Artikel in Ihrem Update, außer die Annahme, dass Sie Vorlagen nicht zwischenspeichern können, wenn Sie sie in das DOM einfügen. Vom jQuery.tmpl documentation,

„um die Vorlage cachen, wenn Markup verwendet, die aus einem String erhalten wird (anstatt von Inline-Markup auf der Seite), $.template(name, markup) verwenden, um eine benannte Vorlage für eine Wiederverwendung zu erstellen. Siehe jQuery.template().“

Mit diesem können wir ein JavaScript-Template-Management-System erstellen, das uns erlaubt, so viele Vorlagen auf einmal zu laden, wie wir brauchen, während wir das DOM sauber halten. Halten Sie auf dem Client einen Hash der Vorlagenobjekte nach Name. Sie können Ihre Lieblings Objekt basiert Javascript Muster hier, aber ich würde denken, die Struktur so sein könnte:

templates[templateName] = { 
    templateMarkup: markupFromServer, 
    loadedAt: Date.now(), 
    compiledTemplateFunction: jQuery.template(templateName, markupFromServer) 
} 

dann die Vorlagen verwenden, um HTML zu erzeugen, wie folgt aus:

templates['unique-name'].compiledTemplateFunction(inputData) 

Dann bauen ein entladen Mechanismus, um Speicher:

function unload(templateName) { 
    delete templates[templateName]; 
    delete jquery.template[templateName]; 
} 

Am wichtigsten ist, können Sie nun ein Verfahren zum Speichern von mehreren Vorlagen, so dass Sie Anfragen wie machen: $.get('/TemplateManagement/Render', arrayOfTemplateNamesToLoad, loadManyTemplatesSuccess) zu lo Mehrere Vorlagen gleichzeitig anzeigen Das einzige, was wir brauchen, ist ein Controller TemplateManagement, der ein Array von Vorlagennamen als Eingabe nimmt und JSON zurückgibt, der einen Vorlagennamen mit seinem Markup verbindet. Es gibt ein paar Möglichkeiten, dies zu tun, aber es scheint mir am bequemsten zu sein, Teilansichten für jede Vorlage zu definieren. In ASP.NET MVC 3 können Sie this technique und RenderPartial verwenden, um das Markup jeder Vorlage in eine JSON-Antwort zu senden. Sie können entweder die Teilansichten wie die Vorlagen benennen oder die Namen in einer benutzerdefinierten Weise zuordnen.