Dieser Artikel wurde maschinell übersetzt.

Clienteinblicke

Verwendung von JsRender mit JavaScript und HTML

John Papa

Viele Entwicklungsplattformen Vorlagen verwenden, um Code reduzieren und vereinfachen die Verwaltung und HTML5 und JavaScript sind keine Ausnahme. JsRender ist eine JavaScript-Bibliothek, die erlaubt Ihnen eine vorformulierten Struktur einmal definieren und wiederverwenden es um HTML dynamisch zu generieren. JsRender bringt eine neue Template-Bibliothek für HTML5-Entwicklung, die hat einen Tag ohne Code-Syntax und hohe Leistung, hat keine Abhängigkeit auf jQuery noch auf die (Dokumentobjektmodell), unterstützt das Erstellen von benutzerdefinierte Funktionen und verwendet reine zeichenfolgenbasierte rendern. In dieser Spalte werden Szenarien für die JsRender ist ideal und veranschaulicht die verschiedenen Funktionen erläutert. JsRender kann heruntergeladen werden von bit.ly/ywSoNu.

Laut Boris Moore und die jQuery UI-Teamblog im April 2011 halten das Team beschloss, jQuery-Vorlagen setzen auf zugunsten der Schaffung einer Logik-weniger und String-basierten Rendering-Bibliothek. Dies führte Moore (eine der treibenden Kräfte hinter dem jQuery Vorlagen) zum Erstellen von JsRender und JsViews. Diese beiden Bibliotheken sind effektiv der Ersatz für jQuery Vorlagen. Erfahren Sie mehr über die Geschichte der Vorlagenerstellung und wie JsRender auf Moore's Post über die jQuery Templates und JsRender-Roadmap entwickelt hat (bit.ly/AdKeDk) und das jQuery Team Post (bit.ly/fhnk8A). Client Einblick werden JsRender und JsViews in den nächsten Monaten untersucht.

Warum Vorlagen?

Verwenden von Vorlagen mit JavaScript verringert und Code vereinfacht. Ohne Vorlagen möglicherweise erforderlich hinzufügen eine Reihe von Listenelementen und andere HTML-Elemente für einen Satz von Daten, Bearbeiten von einem Browser-Dom Dies ist, wo Vorlagen mit einem Plug-in wie JsRender zu tun, die schweres Heben sehr nützlich sein kann. Zum Beispiel nehmen wir an, Sie eine Reihe von Filmen abzurufen und Sie sie anzeigen möchten. Sie schreiben JavaScript und DOM manipulieren könnte, aber der folgende Code zeigt, dass selbst diese einfache Aufgabe kann schwierig zu lesen, auch mit Hilfe von jQuery:

// Without a template
var i = 1;
$(my.vm.movies).each(function () {
  var movie = this;
  $("#movieContainer1").append(
    "<div>" + i++ + ": " + movie.
name + " ("
    + movie.releaseYear + ")</div>");
});

Der Code wird komplett mit JavaScript und jQuery geschrieben, aber kann es schwierig zu erkennen, den HTML-Code aus den Daten aus der JavaScript. Mithilfe einer Vorlage, können wir leichter trennen die Struktur und beseitigen die meisten von den JavaScript-Code. Die folgende Vorlage (01-with-and-without-templates-with-jquery.html im zugehörigen Codedownload) veranschaulicht dieses Konzept:

<script id="myMovieTemplate" type="text/x-jsrender ">
  <div>{{:#index+1}}: {{:name}} ({{:releaseYear}})</div>
</script>

Beachten Sie, dass die Vorlage in einem Skript-Tag umschlossen ist, seinen Typ entsprechend festgelegt ist und es hat eine Id gegeben, damit es später identifiziert werden kann. Wiedergabe einer Vorlage erfordert drei Aspekte: eine Vorlage, Daten und einen Container. Die Vorlage definiert, wie die Daten gerendert werden und der Container definiert, wo man es machen. Der folgende Code veranschaulicht das Rendern einer Liste von Filmen mit der Vorlage mit dem Namen MyMovieTemplate auf ein Element mit der Id des MovieContainer:

$("#movieContainer").html($("#myMovieTemplate").render(my.vm.movies));

In diesem Beispiel verwendet jQuery, um die Syntax zu vereinfachen. Es ist wichtig zu beachten, dass JsRender ist nicht abhängig von jQuery. Der Code JsRender verwenden, um die Daten mithilfe der Vorlage machen kann auch geschrieben werden, wie hier gezeigt (02-Jsrender-Nein-jquery.html im Codedownload):

my.vm = {
  movies: my.getMovies()
};
jsviews.templates({
  movieTemplate: document.getElementById("myMovieTemplate").innerHTML
});
document.getElementById("movieContainerNojQuery").innerHTML
  = jsviews.render.movieTemplate(my.vm.movies);

Rendern von Vorlagen

Sie können Vorlagen mithilfe von JavaScript auf verschiedene Weise rendern. Zunächst müssen Sie Ihre Vorlage als Zeichenfolge oder in einen <script> definieren Tag. Die <script> Option Tag ist schön, wenn Sie Ihre Vorlagen im HTML-Format definieren, geben sie eine Id und wiederverwenden möchten. Sie können auch Vorlagen aus Zeichenfolgen erstellen, erhalten Sie die Möglichkeit, dynamisch im Code zu erstellen oder sogar aus einem Datenspeicher ziehen.

Die Render-Methode wird verwendet, um HTML-Inhalt von Daten mithilfe einer Vorlage. Eine Reihe von Daten kann mit einer Vorlage deklariert in einer <script> gerendert werden Tag mit der Syntax $("# myTmpl").render(data). Sie konnte z. B. eine Liste von Filmen mit einer Vorlage mithilfe des folgenden Codes wiedergegeben:

// #1: Render the my.vm data using the scriptTmpl from a script tag
var htmlString = $("#scriptTmpl").render(my.vm);
// Insert the htmlString into the DOM
$("#div1").html(htmlString);

Sie können auch eine Vorlage aus einer Zeichenfolge mithilfe der $.templates(tmplString)-Funktion kompilieren und setzen Sie ihn auf eine Variable. Sie können dann die kompilierte Vorlage, rendern, wie hier gezeigt:

// #2: Compile a template from a string, return a compiled template
var tmpl2 = $.templates(tmplString);
htmlString = tmpl2.render(my.vm);
$("#div2").html(htmlString);

Sie können auch eine Vorlage aus einer Zeichenfolge mit der Syntax $.templates (Namen, Vorlage), kompilieren, wie hier gezeigt:

// #3: Compile a template, name and register it
$.templates("myTmpl3", tmplString);
var htmlString = $.render.myTmpl3(my.vm);
$("#div3").html(htmlString);

In diesem Beispiel die $.templates Funktion kompiliert eine Vorlage unter Verwendung der TmplString-Zeichenfolge und registriert sie als eine benannte Vorlage. Die Vorlage kann dann über den Namen abgerufen und mithilfe der $.render gerendert. Name() Syntax.

$.templates Funktion ist jQuery-Methoden wie CSS oder .attrib ähnlich, dass es eine alternative Syntax zum Registrieren und mehrere Vorlagen in einem einzelnen Aufruf kompilieren bietet. Anstatt zwei Parameter (Name und TemplateString) zu übergeben, können Sie nur einen Parameter, bestehend aus einer Zuordnung-Objekt mit Schlüssel-Wert-Paaren für jede Vorlage, die registriert werden soll, übergeben:

// #4: Compile multiple templates, register them and render
var tmplString2 = "<div>*** {{:movies.length}} Total Movies ***</div>";
$.templates({
  tmpl4a: tmplString,
  tmpl4b: tmplString2
});
htmlString = $.render.tmpl4a(my.vm);
htmlString += $.render.tmpl4b(my.vm);
$("#div4").html(htmlString);

Jede Eigenschaft in das Objekt wird zu einer benannten und registrierten Vorlage, die gerendert werden kann. Der Wert der Eigenschaft ist die Zeichenfolge, die die Vorlage werden.

Sie haben viele Optionen zum Erstellen, registrieren und Vorlagen-Rendering. Definieren von Vorlagen in Script-Tags ist ein gemeinsamer Ansatz für die meisten Szenarien. Erstellen von Vorlagen aus Zeichenfolgen bietet jedoch eine Menge Flexibilität. Die obigen erweiterte Syntax bietet noch mehr Flexibilität für die benannten Vorlagen (z. B. Deklarieren von Hilfsfunktionen für die Vorlage) andere Funktionen zuordnen. Alle diese Beispiele finden Sie in 03-Rendering-templates.html im Codedownload.

JsRender Grundlagen

JsRender Vorlagen bestehen aus HTML-Markup sowie JsRender Markierungen, wie z. B. die {{für …}} Tag oder die {{: …}} Tag. Abbildung 1 zeigt die Syntax für das grundlegendste JsRender Tags: {:} und {{> {}} Markierungen. Alle JsRender Template-Tags werden in doppelte geschweifte Klammern eingeschlossen. Die Tag-Namen (in diesem Fall die ":" oder ">" Zeichen) können von einem oder mehreren Parametern oder Ausdrücke gefolgt werden. (Bei dem {:} Tag, würde das Ergebnis des Ausdrucks dann gerendert werden.) Sobald eine Vorlage definiert wurde, und es gibt Daten in dieser Vorlage gerendert werden soll, kann es gerendert werden.

Abbildung 1 Basic JsRender-Syntax

Der folgende Code enthält ein HTML-Element mit dem Namen Film­Container (Dies ist, wo die Vorlage gerendert wird):

<div id="movieContainer" class="resultsPanel movieListItemMedium"></div>
<script id="movieTemplate" type="text/x-jsrender">
  <div class="caption">{{:name}}</div>
  <div class="caption">{{>name}}</div>
  <img src="{{:boxArt.smallUrl}}"/>
  <div class="text">Year Released: {{:releaseYear}}</div>
  <div class="text">Rating: {{:rating}}</div>
</script>

Der vorangehende Code enthält auch die Vorlage mit dem Namen Film­Vorlage, die definiert eine Div Anzeigen des Namens des Films verwenden keine HTML-Codierung mithilfe der Syntax {{: Name}}. Der Titel in den Beispieldaten enthalten HTML-Elemente, also Elemente, die mit HTML-Code gerendert es wichtig ist, nicht-Kodierung zu verwenden. Jedoch, wenn Sie das codierte HTML rendern möchten, können Sie die Syntax mit der > Zeichen oder HTML verwenden (wie im Abbildung 1).

Der Name-Eigenschaftenwert enthält HTML-Elemente, also zu Demonstrationszwecken nur der vorangehende Code den Wert der Namenseigenschaft mit keine Codierung zeigt ({{: Name}}) und dann zeigt den HTML-codierte Wert ({{> Name}}). Sie können das vollständige Beispiel in 04-Render-values.html im Codedownload ausführen.

Die Film-Beispieldaten an das Template übergeben hat eine Eigenschaft für BoxArt, die wiederum eine Eigenschaft für die SmallUrl des Bildes hat. Das Img-Tag SRK wird durch Eintauchen in ein Objektdiagramm-Hierarchie mithilfe der Dot-Syntax-boxArt.smallUrl festgelegt. Pfade können auch mit eckigen Klammern durchlaufen werden, so dass statt boxArt.smallUrl zu schreiben, das gleiche Ergebnis Code mit BoxArt ['SmallUrl'] erreicht werden.

Es ist wichtig zu beachten, dass JsRender Syntax auch verwendet werden, kann um andere Werte wie die Namen der Klassen oder Ids für HTML-Elemente zu rendern.

JsRender Vorlage Rendering erkennt, ob der Data-Parameter ein Array oder nicht ist. Wenn es sich um ein Array handelt, ist der Rückgabewert die Verkettung von Zeichenfolgen, die jeweils die einzelnen Arrayelemente an die Render-Methode übergeben entstehen würden. Damit die Vorlage gerendert wird einmal für jedes Element und das Ergebnis der verketteten Zeichenfolge sein werden.

Der folgende Code veranschaulicht, wie ein Film-Objekt aus dem Array gerendert wird, der MovieTemplate (der vollständige Quellcode ist verfügbar in Beispiel 04-Render-values.html):

my.vm = { movies: getMovies() };
$("#movieContainer").html($("#movieTemplate").render(my.vm.movies[1]));

Im nächste Abschnitt zeigen, wie die Vorlage geschrieben werden konnte, sowie ein Array durchlaufen.

Bohren in hierarchischer Daten

Vorlagen werden häufig verwendet, um eine Reihe von Elementen, machen das oft geschachtelte und hierarchische Daten (Objektdiagramme) enthalten kann. Abbildung2 zeigt wie JsRender durchlaufen werden kann eine Datenreihe mit der {{}} kennzeichnen. Der Parameter für die {{für}} Tag kann ein Array oder eine Reihe von Arrays, die durchlaufen werden.

Abbildung 2 Iteration Grundlagen

Die Film-Beispieldaten definiert, dass jeder Film ein Array der rating-Sternen RatingStars aufgerufen hat. Die Eigenschaft enthält die CSS-Klasse, um eine Bewertung Sterne für den Film anzuzeigen. (Ab 05-für-data.html im Beispielcode) der folgende Code wird veranschaulicht, wie jedes Element im RatingStars-Array durchlaufen und machen den Namen der CSS-Klasse mithilfe der {{: # Data}} Syntax:

<ul>
  {{for ratingStars}}
  <li class="rating {{:#data}}"/>
  {{/for}}
</ul>

# Data Token ist ein JsRender-Schlüsselwort, das das Objekt durchlaufen wird. In diesem Fall enthält das RatingStars-Array ein String-Array, so dass # Data wird eine Zeichenfolge darstellen. Die Ausgabe für dieses Beispiel wird dargestellt, Abbildung 3, wo die Bewertung Sterne neben dem Film Bild angezeigt werden.

Abbildung 3 Rendern eines Objekts mit und ohne Codierung

Vorlagen-Arrays

Wenn ein Array an eine Vorlage übergeben wird, wird die Vorlage für jedes Element im Array einmal gerendert. Eine Vorlage rendert gegen ein einzelnes Datenelement, aber wenn es enthält ein {{für}} Template-Tag mit einer Array-Parameter, und dann im Abschnitt der Vorlage zwischen den öffnenden und schließenden Tags {{für}} und {{/}} wird weiter durchlaufen werden. Im folgende Code wird ein Objekt my.vm übergeben, die enthält ein Array von Filmen an die Render-Funktion für jeden Film ein Listenelement angezeigt (der vollständige Quellcode kann in der Probe 06-If-else.html gefunden werden):

$("#movieList").html($("#movieTemplateMedium").render(my.vm));

Die Vorlage wird als Inhalt der <ul> gerendert werden Element mit der Id MovieList:

<ul id="movieList"></ul>

Abbildung 4 zeigt den Vorlage Film­TemplateMedium beginnt mit dem Rendern <li>. Für jeden Film in dem Array, ein <li> wird unter des Containers <ul> gerendert werden.

Die Vorlage im Abbildung 4 erhält das my.vm-Objekt als seinem Kontext und durchläuft dann die Arrayeigenschaft Filme wegen der {{für Filme}} Code. Wenn die Vorlage die Array-my.vm.movies statt my.vm, erhielt die {{für}} {{/}} Block konnte entfernt werden, da die Vorlage dann für jedes Element im Array ausführen würde.

Abbildung 4 eine Liste der Elemente zu rendern und mithilfe von Bedingungen

{{for movies}}
  <li class="movieListItemMedium">
  <div class="caption">{{:name}}</div>
  {{if boxArt.smallUrl}}
    <img src="{{:boxArt.smallUrl}}"/>
  {{else}}
    <img src="../images/icon-nocover.png"/>
  {{/if}}
  <br/>
  <div class="text">Year Released: {{:releaseYear}}</div>
  <div class="text">rating: {{:rating}}</div>
  <ul>
    {{for ratingStars}}
      <li class="rating {{:#data}}"/>
      {{/for}}
  </ul>
  <br/>
  <div class="text">${{:salePrice}}</div>
  {{if fullPrice !== salePrice}}
    <div class="text highlightText">PRICED TO SELL!</div>
  {{/if}}
  </li>
{{/for}}

Pfaden durchlaufen

Wie wir zuvor gesehen haben, können die Pfade mit der Punktsyntax oder die eckigen Klammern traversiert werden. Sie können jedoch auch gehen zurück bis einer Objekthierarchie mithilfe von #parent oder ein Arrayelement mit eckigen Klammern zu identifizieren. Beispielsweise könnten Sie ersetzen Sie den Code, das Img-Tag in die Vorlage mit folgenden anzeigt:

<img src="{{:#parent.parent.data[2].boxArt.smallUrl}}"/>

Der Kontext für die Vorlage ist ein Element im my.vm.movies-Array. Also wird der Kontext durch Navigation bis in den übergeordneten zweimal, das my.vm-Objekt geworden. Dann können Sie den Film mit Index 2 greifen und verwenden Sie die boxArt.smallUrl-Eigenschaft für das Bild. Die Folge davon wäre, den gleichen Film (der dritte Film) für jeden Film im Array anzuzeigen (siehe Abbildung 5). Ideal in dieser Situation, aber es dient nicht gerade den Punkt, der zeigt, wie Sie Objekte nach oben und unten die Hierarchie zu durchlaufen.

Abbildung 5 durchlaufen Pfade zu das gleichen Film Bild für jeden Film anzeigen

Bedingungen

Die JsRender-Syntax unterstützen auch Bedingungen, die mit den Tags {{If}} und {{else}} (siehe Abbildung 6). Die {{if}} Tag von 0 (null), gefolgt werden kann ein oder mehrere {{else}} Tags, und dann eine schließende {{/ if}} Tag. Der Inhalt des Blocks zwischen der {{If}} Tag und die {{/ if}} (oder bis zu dem ersten {{else}} Tag, falls vorhanden) wird in der Ausgabe gerendert werden, nur wenn der Wert des Ausdrucks in der {{If}} "truthy."

Abbildung 6 Conditionals, Ausdrücke und Operatoren

{{Else}} Tag kann wie eine Ifelse handeln, wenn es seinen eigenen Ausdruck enthält. Beachten Sie im zweite Beispiel Abbildung 6, die veranschaulicht einer Bedingung mit zwei anderen Tags. Dieser Code ergibt drei Bedingungen in der Reihenfolge.

Der Block nach einen {{else SomeCondition}} Tag werden ausgegeben, wenn die Bedingung als True ausgewertet wird (oder, genauer gesagt, truthy). Diese Syntax kann effektiv wie ein Switch/Case-Anweisung verwendet werden, n die Anzahl der Bedingungen auszuwerten.

Die in JsRender-Tags verwendeten Ausdrücke können komplexe Ausdrücke mithilfe der Auswertung Operatoren einschließlich Pfade, Zeichenfolgen, Zahlen, Funktion Anrufe und Vergleichsoperatoren wie ===,! == und < =. Dies gilt sowohl für die Ausdrücke ausgewertet und dargestellt durch das Tag {:}, und, hier, für die bedingte Ausdrücke in die {{If}} und {{else}} tags.

Mithilfe von Leistungsindikatoren und komplexe bedingte Ausdrücke

Manchmal ist es notwendig, zur Anzeige oder Verwendung eine Zählervariable in einer Vorlage. Ein solches Szenario ist, wenn Sie die Nummer einer Zeile in der Vorlage anzeigen möchten. Ein anderes solches Szenario könnte sein, dass Sie eine eindeutige Id für jedes Element in einer Vorlage zuweisen, damit Sie später darauf verweisen können. Beispielsweise Sie durchlaufen eine Liste von Filmen und wickeln Sie sie alle in einer <div> Tag. Sie können die Id des Div-Tags, movieDiv1, movieDiv2 und so weiter werden zuweisen. Dann könnte Sie das Element seine ID Wenn benötigt vielleicht, es an einen Ereignishandler mit der jQuery-Delegat-Funktion binden, finden. Für beide Szenarien können Sie das JsRender-Schlüsselwort Index (die beginnt bei 0). Siehe Abbildung 7, Index kann ganz einfach in einer Vorlage angezeigt werden.

Abbildung 7 Zähler und Bedingungen in mehrere Ausdrücke

Oft kann ein einzelner Ausdruck nicht angemessen. JsRender unterstützt mehrere Ausdrücke mit den logische Operatoren || und & & ("oder" und "bzw."). Dies erleichtert es, mehrere Ausdrücke zu kombinieren, wenn Sie entweder einer von ihnen wahr zu bewerten möchten.

Durchlaufen Sie mehrere Arrays zusammen

Die {{für}} Tag auch gleichzeitig mehrere Arrays durchlaufen kann. Dies ist hilfreich, wenn sich zwei Arrays, die gemeinsam durchlaufen werden müssen. Der folgende Code zeigt beispielsweise, wie die für Tag zusammen mit den Sternen und den Cast-Arrays durchlaufen werden:

{{for stars cast}}
  <div class="text">{{:name}}</div>
{{/for}}

Wenn zwei Elemente in das Array von Sternen und drei in der Cast-Array vorhanden sind, werden alle fünf Elemente Inhalt gerendert werden.

Dies ist eine gute Situation das # Data-Schlüsselwort auch verwenden, wenn die Elemente in den Arrays Objekte (mit Eigenschaften) aber einfachen String-Werte nicht. Beispielsweise die Arrays Mobilfunk- und HomePhones Zeichenfolgenarrays sein könnte, und vielleicht möchten sie in einer Liste aufgeführt.

Geschachtelte Vorlagen

Anwendungen rufen oft Objektdiagramme wo Objekte Eigenschaften haben, deren Werte sind Arrays von Objekten, die auch andere Arrays von Objekten enthalten kann. Diese Szenarien können schnell schwierig zu verwalten, wenn mehrere {{für}}-Anweisungen geschachtelt werden. Betrachten Sie ein Customer-Objekt, Bestellungen kann die Bestellartikel, die mit einem Produkt, haben die Lager hat. Diese hierarchischen Daten konnten durch Verwendung mehrerer {{für}}-Tags gerendert werden. Dies ist eine großartige Situation wo der Inhalt von einem {{für}} Block als eine separate Vorlage gepackt und als eine verschachtelte Vorlage gerendert werden kann. Dies kann reduzieren Code leichter lesbar und verwaltbar zu machen, und für Wiederverwendung und Modularität der Vorlagen.

Sie können eine verschachtelte Vorlage mit einem {{für}} Tag durch das Entfernen der Inhalts blockieren (wodurch sie selbstschließend) und Angabe einer externen Vorlage mithilfe des Parameters Tmpl. Beispielsweise können Sie des Tmpl Parameters ist der Name einer benannten Vorlage (registriert mit $.templates) oder einen jQuery Selektor können Sie für eine Vorlage in einem Script-Block deklariert. Die folgende Syntax benutzt die benannte Vorlage MyTmpl für jedes Element im Array namens MyArray:

{{for myArray tmpl="myTmpl"/}}

Im folgenden Codeausschnitt wird die Vorlage für jedes Element im Array Filme (aus dem Beispiel 04-Tmpl-Combo-iterators.html) mit der Id des MovieTemplateMedium verwenden:

<ul>
  {{for movies
    tmpl="#movieTemplateMedium"/}}
</ul>

Sie können mehrere Arrays durchlaufen und Zuweisen einer Vorlage zu ihnen, als auch. Beispielsweise im folgenden Codeausschnitt wird die CastTemplate für jedes Element in die Sterne und Cast verwenden Eigenschaften (die beiden Arrays aus Beispiel 07-Tmpl-Combo-iterators.html sind):

<ul>
  {{for stars cast tmpl="#castTemplate"/}}
</ul>

Beachten Sie, in jedem der vorherigen code Schnipsel der {{für}} Tag ist eine selbstschließende Tag eher als ein Block-Tag, das Inhalt enthält. Statt inhaltlich Block durchlaufen, es ist die Iteration auf der verschachtelten Vorlage durch die Tmpl-Eigenschaft angegebenen verzögern und ist Rendern dieser Vorlage einmal für jedes Element im Array.

Die {{if}} Template-Tag auch als selbstschließende Tag verweisen auf eine andere Vorlage für den Inhalt verwendet werden kann wie die {{für}} kennzeichnen. Beispielsweise würde der folgende Code die benannte Vorlage MyAddressTmpl rendern, wenn Adresse truthy ist:

{{if address tmpl="myAddressTmpl"/}}

Den Beispielen zum Download zur Verfügung werden alle in diesem Artikel beschriebenen Features. Abbildung 8 zeigt die Liste der Filme mit all diesen Features aus dem Beispiel 07 gerendert-Tmpl -­Combo-iterators.html Datei.

Abbildung 8 alles zusammen

Mehr unter der Decke

Diese Spalte zeigt die grundlegenden Features des JsRender, aber es gibt viel mehr unter der Decke. Zum Beispiel obwohl die bedingte Tags mehrere {{für}} Tags mit Bedingungen (z. B. einem Switch/Case-Anweisung) enthalten können, könnte es sauberere Arten umgehen, wie die Verwendung von benutzerdefinierten Tags zu. JsRender unterstützt benutzerdefinierte Tags für komplexe Logik, Hilfsfunktionen, navigieren bis das Objektdiagramm mithilfe von Pfaden, Kunde Konverter Funktionen, so dass JavaScript-Code innerhalb von Vorlagen, Umspritzen von Vorlagen und vieles mehr. Ich werde einige dieser Techniken in der nächsten Ausgabe untersuchen.

John Papa ist ein ehemaliger Microsoft-Experte in den Silverlight- and Windows 8-Teams und hat die beliebte Silverlight-TV-Sendung moderiert. Er hat weltweit Keynotes und Sessions präsentiert für BUILD, MIX, PDC, TechEd, Visual Studio Live! und DevConnections Events. Papa ist auch ein Microsoft Regional Director, ein Kolumnist ForVisual Studio Magazine (Papas Perspektive) und Autor von Schulungsvideos mit Pluralsight. Sie können ihm auf Twitter unter twitter.com/john_papa folgen.

Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Boris Moore