この記事は機械翻訳されたものです。
クライアントへの理解
JavaScript、HTML と共に JsRender を使用する (機械翻訳)
.jpg "John Papa")
テンプレート コードを削減し、メンテナンスを簡素化する多くの開発プラットフォームを使用し、HTML5 と JavaScript の例外はありません。JsRender 定型文構造を一度定義して、HTML を動的に生成するために再利用することができます JavaScript ライブラリです。JsRender 新しいテンプレート ライブラリは、コードレスのタグ構文をおり、高パフォーマンスする jQuery にも、ドキュメント オブジェクト モデル (DOM) には、依存関係は持たないカスタム関数の作成をサポートしています、純粋な文字列ベースのレンダリングを使用 HTML5 開発にもたらします。この列には JsRender が最適であり、さまざまな機能を使用する方法を示しますシナリオについて説明します。すべてのコード サンプルからダウンロードすることができます msdn.com/magazine/msdnmag0412、および JsRender からダウンロードすることができます bit.ly/ywSoNu。
ボリス ・ ムーアと jQuery の UI のチームのブログによると、ロジック ・文字列ベースのレンダリング ライブラリを作成するのに賛成の jQuery テンプレートを配置することを決めたチーム 2011 年 4 月を保持します。これは JsRender と JsViews を作成するムーア (jQuery テンプレートの背後にある原動力の 1 つ) を主導しました。これら 2 つのライブラリは、効果的に jQuery のテンプレート用の代替品です。詳細テンプレートの履歴、ムーアの記事 jQuery テンプレートと JsRender のロードマップについて JsRender がどのように進化しているを読むことができます (bit.ly/AdKeDk) と jQuery チームの記事 (bit.ly/fhnk8A)。クライアントの洞察力 JsRender と JsViews は、次の数ヶ月間学びます。
なぜテンプレートですか？
テンプレートを使用して JavaScript を削減し、コードを簡略化します。テンプレートを使用しない、可能性があります必要と一連のリスト項目と他の HTML 要素の一連のデータを追加、ブラウザーの DOM の操作これで、プラグインの JsRender などを使用してテンプレート、重い物を持ち上げるを行うには非常に便利なことができますです。たとえば、映画のセットを取得し、それらを表示すると仮定しましょう。JavaScript を書くし、DOM を操作ことができますが、この単純な作業も、jQuery のヘルプとも読むことは困難になることが、次のコードを示します。
// Without a template
var i = 1;
$(my.vm.movies).each(function () {
var movie = this;
$("#movieContainer1").append(
"<div>" + i++ + ": " + movie.
name + " ("
+ movie.releaseYear + ")</div>");
});
JavaScript と jQuery、完全、コードが書かれているが、それは、JavaScript からデータから HTML を見分けるは難しいことができます。 テンプレートを使用して、簡単に構造を分離して JavaScript のコードの大部分を排除できます。 (付属のコード ダウンロードの 01-with-and-without-templates-with-jquery.html) の次のテンプレートでは、この概念を示しています。
<script id="myMovieTemplate" type="text/x-jsrender ">
<div>{{:#index+1}}: {{:name}} ({{:releaseYear}})</div>
</script>
テンプレート、スクリプト タグで囲まれ、その型に応じて設定されているし、それに後で識別することができますので、id を与えているに注意してください。 テンプレートのレンダリングには、3 つの側面が必要です。テンプレート、データ コンテナー。 テンプレート データのレンダリング方法を定義し、それをレンダリングするために、コンテナーを定義します。 MovieContainer の id を持つ要素に myMovieTemplate をという名前のテンプレートを使用して映画のリストをレンダリングする方法を次に示します。
$("#movieContainer").html($("#myMovieTemplate").render(my.vm.movies));
この例では、jQuery を使用して、構文を簡略化します。 JsRender の jQuery の依存ではないことに注意してくださいすることが重要です。 ここ (02-jsrender-なし - コードのダウンロードに jquery.html) を示すように JsRender を使用して、テンプレートを使用してデータを表示するコードを記述することもできます。
my.vm = {
movies: my.getMovies()
};
jsviews.templates({
movieTemplate: document.getElementById("myMovieTemplate").innerHTML
});
document.getElementById("movieContainerNojQuery").innerHTML
= jsviews.render.movieTemplate(my.vm.movies);
テンプレートのレンダリング
JavaScript を使用していくつかの方法でテンプレートをレンダリングすることができます。 まず、文字列または <script> であなたのテンプレートを定義する必要があります。 タグ。 <script> HTML に、テンプレートを定義、それらの id は、それらを再利用する場合タグ オプションはいいです。 それらをその場でコードを作成またはもそれらをデータ ストアからプルすることができます、文字列からテンプレートを作成することもできます。
Render メソッドは、テンプレートを使用してデータから HTML コンテンツをレンダリングするために使用されます。 一連のデータは <script> を宣言するテンプレートを表示することができます。 タグを使用して構文 $(」# myTmpl").render(data)。 たとえば、映画のリストを次のコードを使用して、テンプレートをレンダリングできます。
// #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);
$.Templates(tmplString) 関数を使用して、文字列からテンプレートをコンパイルし、変数に設定することもできます。、 ここで示すように、コンパイル済みのテンプレートをレンダリングすることすることができます。
// #2: Compile a template from a string, return a compiled template
var tmpl2 = $.templates(tmplString);
htmlString = tmpl2.render(my.vm);
$("#div2").html(htmlString);
ここで示すように $.templates (名前、テンプレート) 構文を使用して、文字列からテンプレートをコンパイルすることもできます。
// #3: Compile a template, name and register it
$.templates("myTmpl3", tmplString);
var htmlString = $.render.myTmpl3(my.vm);
$("#div3").html(htmlString);
この例では、$.templates 関数 tmplString 文字列を使用して、テンプレートをコンパイルし、名前付きテンプレートとして登録します。 テンプレートは名前でアクセスし、$.render を使用して表示できます。 name() 構文。
登録すると、1 回の呼び出しで複数のテンプレートをコンパイル、別の構文を提供 $.templates 関数は、.css、または .attrib などの jQuery メソッドに似ています。 2 つのパラメーター (名前と templateString) を渡すのではなく、キーと値のペアを登録するのには、各テンプレートのマッピング オブジェクトから成る 1 つのパラメーターを渡すことができます。
// #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);
オブジェクト内のすべてのプロパティは表示できる名前付きと登録されているテンプレートになります。 プロパティの値は、テンプレートとなる文字列です。
作成、登録し、テンプレートをレンダリングする多くのオプションがあります。 テンプレート スクリプト タグで定義するほとんどのシナリオの一般的なアプローチです。 しかし、文字列からのテンプレートの作成の柔軟性がたくさん提供しています。 上記の拡張構文 (ヘルパー関数は、テンプレートに固有の宣言) などの名前付きテンプレートとその他の機能を関連付けるためのさらなる柔軟性を提供します。 これらすべての例 03-レンダリング-templates.html でのコードのダウンロードであります。
JsRender の基礎
JsRender テンプレートから成ります HTML マークアップと JsRender タグのように {{の.}} タグまたは {{:.}} タグ。 図 1 JsRender タグの基本構文を示しています。{：} と {{> }} タグ。 JsRender テンプレートのすべてのタグは、二重の中かっこでラップされます。 タグ名 (この場合は、「:」または">"文字) 1 つ以上のパラメーターまたは式で続くことができます。 ({：} タグの場合は、式の結果、レンダリングされます。)テンプレートが定義されているが、テンプレートをレンダリングするデータと、それをレンダリングできます。
図 1 基本的な JsRender 構文
| 説–¾ | サンプル | [出力] |
| FirstName プロパティはエンコーディングとデータ項目の値 | {{: firstName}} | マデリン |
| 単純なオブジェクト プロパティへのパスはエンコーディングと入れ子になった、 | {{: movie.releaseYear}} | 1987 |
| 単純な比較 | {{: movie.releaseYear < 2000}} | true |
| エンコーディングと値します。 | {{: 映画。 名}} | スター ・ ウォーズ IV:ジェダイの帰還 |
| HTML でエンコードされた値 | {{> 映画。 名}} | スター ・ ウォーズエピソード VI:< スタイルにまたがる =' 色: 紫色、フォント スタイル。斜体;'> のジェダイを返す </span> |
| HTML でエンコードされた値 | {{html:movie。 名}} | スター ・ ウォーズエピソード VI:< スタイルにまたがる =' 色: 紫色、フォント スタイル。斜体;'> のジェダイを返す </span> |
次のコードが含まれています映画という名前の HTML 要素にはコンテナー (これは、テンプレートをレンダリングする)。
<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>
上記のコードにも映画をという名前のテンプレートが含まれているテンプレートは、HTML の構文を使用してエンコーディングを使用していない映画の名前を表示するには、div を定義 {{: 名}}。 HTML を含む要素をレンダリングするエンコーディングを使用しないことが重要ですので、サンプル データのタイトル HTML 要素があります。 ただし、エンコードされた HTML をレンダリングする場合は、構文を使用できます、> 文字または HTML を使用する (に示すように図 1)。
Name プロパティの値が含まれている HTML 要素、デモンストレーションのためだけ、上記のコードはエンコーディングと name プロパティの値が表示されます ({{: 名}}) と HTML でエンコードされた値を示します ({{> 名}})。 04-レンダリング-values.html コードのダウンロードの完全な例を実行できます。
テンプレートへ渡すサンプル ムービー データ カプコンは、順番に、イメージの smallUrl プロパティがプロパティをが。 Img タグの src は、ドット構文 boxArt.smallUrl を使用して、オブジェクト グラフの階層にダイビングで設定されます。 パスは角かっこを使用しても通過することができます、boxArt.smallUrl を記述する代わりに、同じコード結果カプコン ['smallUrl'] を使用して実現します。
JsRender 構文も HTML 要素のクラスまたは id の名前などの他の値をレンダリングするために使用することがでくことが重要です。
JsRender テンプレート レンダリング データ パラメーター配列かどうかを検出します。 配列の場合は、戻り値は個々 の配列項目の各を render メソッドに渡すからなる文字列の連結です。 各データ項目と、結果の連結された文字列回テンプレートがレンダリングされるようにします。
配列から 1 つのムービー オブジェクトを表示する方法を次のコードを示します (完全なソースはサンプル 04-レンダリング-values.html で利用できる) movieTemplate に。
my.vm = { movies: getMovies() };
$("#movieContainer").html($("#movieTemplate").render(my.vm.movies[1]));
次のセクションでは、テンプレートを作成しても、配列を反復処理することができますを説明します。
階層データへのドリル
テンプレートは、一連の項目は、多くの場合入れ子になった階層データ (グラフ オブジェクト) を含めることができますをレンダリングするためによく使用されます。 図2タグのことができます JsRender をどのように反復処理、{{の}} を使用して、データの一連を示しています。 パラメーターは {{のため}} タグ配列または一連のアレイは、反復処理することができます。
図 2 反復基礎
| 説–¾ | サンプル | [出力] |
| 「」を使用して、配列の各項目をループ | {{キャスト}} <div> {{: stageName}} </div> {{/}} |
ランドンはパパが エラはパパが |
| #Data を使用してデータ コンテキストへのアクセスします。 | {{の電話}} <div> {{: #data}} </div> {{/}} | 555-555-1212 555-555-1212 |
サンプル ムービー データでは、各ムービーの評価 RatingStars と呼ばれる星の配列であることを定義します。 プロパティには評価星の映画を表示するには、CSS クラスが含まれています。 次のコード (05-の-data.html のサンプル コード) から RatingStars 配列内の各アイテムを反復処理し、CSS クラス名を使用してレンダリングする方法を示します、{{: #data}} の構文。
<ul>
{{for ratingStars}}
<li class="rating {{:#data}}"/>
{{/for}}
</ul>
#Data トークンは、反復処理されるオブジェクトを表す JsRender のキーワードです。 この場合、#data 文字列表現されますので RatingStars 配列には、文字列配列が含まれます。 このサンプルの出力が表示されます図 3は評価星、映画のイメージの横に表示されます。
.png)
図 3 とエンコーディングをせず、オブジェクトのレンダリング
アレイにテンプレート
配列をテンプレートに渡されると、配列内の各項目を一度、テンプレートが表示されます。 それは {{の}} が含まれているが、1 つのデータ項目に対してテンプレートを表示、配列パラメーターをセクションの開始タグと終了タグ {{}} の間に、テンプレートのテンプレート タグと {{/}} さらに補間されます。 次のコードの映画 (完全なソースは、サンプル 06-if-else.html で見つけることができます） 各ムービーのリスト アイテムを表示するには、レンダリング関数に配列を含む、オブジェクト my.vm に合格されます。
$("#movieList").html($("#movieTemplateMedium").render(my.vm));
テンプレートは、<ul> のコンテンツとして表示されます。 id movieList を持つ要素:
<ul id="movieList"></ul>
図 4 テンプレート映画を示していますTemplateMedium 開始 <li> をレンダリングすることで。 すべての映画、配列には <li> コンテナーの下の <ul> が表示されます。
テンプレートで図 4 、my.vm オブジェクトとそのコンテキストを受け取るし、映画の配列プロパティのため、ループ、{{の作品}} コード。 配列 my.vm.movies my.vm のではなく、テンプレートを受け取った場合、{{の}} {{/}} ブロックの削除、テンプレート [配列内のすべての項目を実行することができます。
図 4 の項目のリストをレンダリングと条件を使用して
{{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}}
横断パス
私達が以前見たように、ドット構文または角かっこを使用してパスを横断することができます。 ただし、#parent を使用して、オブジェクト階層を戻るまたは角かっこを使用して配列要素を識別することもできます。 たとえば、次のテンプレートで、img タグを表示するコードを置き換えることができます。
<img src="{{:#parent.parent.data[2].boxArt.smallUrl}}"/>
コンテキスト テンプレートを my.vm.movies 配列内の項目です。 ナビゲートを親の 2 回すると、コンテキストは、my.vm オブジェクトになるようにします。 [インデックス 2 と映画をつかむし、画像を boxArt.smallUrl プロパティを使用することができます。 この結果、アレイ内のすべての映画の同じムービー (3 番目の映画) を表示するには (で示すように図 5)。 丁度この状況が理想的なの両方を上下に、階層オブジェクトをスキャンする方法を示す、機能します。
.png)
図 5 のすべての映画は、同じ映画のイメージを表示するにはパスをトラバースします。
条件
JsRender 構文もサポート {{if}} のタグを使用して条件 {{他}} (表示図 6)。 タグはゼロでは、後に可能性があります {{場合}} {{他}} のタグは、1 つまたは複数をクリックし、終了 {{/}} タグ。 {{If}} 間ブロックのコンテンツ タグ、{{/}} (存在する場合、最初の {{他}} タグまで) で、{{}} の式の値が「truthy」場合のみ出力が表示されます
図 6 条件、式、および演算子
| 説–¾ | サンプル | [出力] |
| 場合の作成ブロック比較評価 | {{場合 fullPrice ！ salePrice = =}} < div クラス」テキスト highlightText」= > 販売価格 ！ </div> {{/}} |
販売価格 ！ |
| If/else ブロック | {{場合 qtyInStock > = 10}} 入荷 {{他 qtyInStock}} のみ {{: qtyInStock}} 左 ！ {{他}} 使用できません。 {{/}} |
唯一の 5 左 ！ |
独自の式が含まれる場合 {{他}} のタグ、ifelse のような行動することができます。 2 番目の例では、注意してください図 6は、条件付き 2 つの他のタグを示します。 このコード シーケンスで 3 つの条件を評価します。
条件が true に評価された場合、{{他 someCondition}} タグに続くブロックは出力になります (またはより正確に、truthy)。 この構文は効果的に n 個の条件を評価するために、スイッチ ・ case ステートメントのように使用できます。
JsRender タグで使用される式が複雑な式の評価演算子、パスを含む文字列、数値、関数呼び出しと比較演算子などを使用することができます = = =、! =、< =。 条件付きの式使用 {{if}} と {{他}} をタグこの両方の式の評価し、{：} タグにより、ここでは、レンダリングの場合です。
カウンターと複雑な条件式を使用してください。
表示または、カウンター変数をテンプレートに使用する必要が。 テンプレートに行番号を表示する場合このようなシナリオの 1 つです。 などの別のシナリオは、後で参照できるように、テンプレート内の各要素に一意の id を割り当てることがあります。 たとえば、映画のリストを反復処理し、それらすべてを <div> の中をラップ タグ。 MovieDiv1、movieDiv2 のようになるには、div タグの id を割り当てることができます。 おそらく jQuery デリゲート関数を使用してイベント ハンドラーをバインドするには、必要に応じてその id によって、要素が見つかりません。 これらのシナリオの両方のため、（これは 0 から始まります) JsRender キーワード #index を使用できます。 示すように図 7、#index 表示できるテンプレートは非常に簡単にします。
図 7 カウンターと条件で複数の式
| 説–¾ | サンプル | [出力] |
| インデックスを使用して、テンプレート内のカウントするには | {{の作品}} < div クラス「キャプション」= > {{: #index}}。{{: 名}} </div> {{/}} |
3: プリンセス ・ ブライド |
| 論理演算子の使用 | {{場合 stars.length | | cast.length}} < div クラス「本文」を = > 完全な配役: </div> {{/}} |
フル出演： |
しばしば、1 つの式を適切なされない場合があります。 JsRender などの論理演算子を使用して複数の式をサポートしている | |・ ・ (「または」「と、」それぞれ)。 いずれか一方を true に評価する複数の式を結合することは簡単でした。
複数のアレイを一緒に反復処理します。
反復タグも複数のアレイを一度に処理することができます {{の}}。 これは、一緒に通過する必要がある 2 つの配列がある場合に役立ちます。 たとえば、次のコードを示していますどのように、タグ、星とキャスト配列の両方を一緒反復処理するため。
{{for stars cast}}
<div class="text">{{:name}}</div>
{{/for}}
星配列内の 2 つの項目と 3 キャスト配列の場合、すべての 5 つの項目の内容が表示されます。
配列内の項目オブジェクト (プロパティ) を単純な文字列値がない場合はこれも #data キーワードを使用するには、良い状況です。 たとえば、MobilePhones、HomePhones 文字列の配列、配列をことができる、それらを 1 つの一覧に表示する必要があります。
入れ子になったテンプレート
アプリケーションは多くの場合はオブジェクトをプロパティ値を持つオブジェクトの他の配列も含めることができますオブジェクトの配列があるオブジェクト グラフを取得します。 これらのシナリオに複数 {{}} ステートメントの入れ子にする場合の管理が困難になります。 Customer オブジェクトが倉庫、製品、注文の品目が注文がありますを検討してください。 この階層データ {{}} タグの複数を使用してレンダリングできませんでした。 これは、状況はここで、コンテンツは {{ための}} ブロックを別のテンプレートとしてパッケージ化でき、入れ子になったテンプレートとしてレンダリングします。 これは、コードを削減しがより簡単に読みやすく、管理しやすく、や再利用やモジュールのテンプレートの提供します。
ネストされたテンプレートを使用して、{{ために}} (自己終了は) ブロックの内容を削除するタグと tmpl パラメーターを使用して、外部のテンプレートを指定します。 たとえば、tmpl パラメーター ($.templates を使用して登録)、名前付きテンプレートの名前を設定することができます。 またはスクリプト ブロックで宣言されたテンプレートは、jQuery セレクターを使用することができます。 次の構文では、名前付きテンプレート myTmpl を使用して myArray という名前の配列内の各アイテム。
{{for myArray tmpl="myTmpl"/}}
次のコード スニペット テンプレート各配列内の項目の映画から、サンプル 04-tmpl-コンボ-iterators.html) の movieTemplateMedium の id を使用します。
<ul>
{{for movies
tmpl="#movieTemplateMedium"/}}
</ul>
複数の配列を反復処理し、テンプレートにも適用できます。 たとえば、次のコード スニペット、castTemplate 各項目星とキャストの両方で使用する、サンプル 07-tmpl-コンボ-iterators.html からの両方のアレイのプロパティ。
<ul>
{{for stars cast tmpl="#castTemplate"/}}
</ul>
スニペット、{{の}} コードは、前の各注意タグはコンテンツを含むブロック タグではなく、自己終了タグ。 そのブロックのコンテンツを反復処理するのではなく、tmpl プロパティによって示される、ネストされたテンプレートにイテレーションを延期、そのテンプレートを配列内の各項目に対して 1 回のレンダリングです。
テンプレートのタグは、そのコンテンツを別のテンプレートを参照する自己終了タグとしても使用することができます {{場合}} は、{{よう}} タグします。 たとえば、アドレスが truthy の場合、次のコードは名前付きテンプレート myAddressTmpl レンダリングします。
{{if address tmpl="myAddressTmpl"/}}
ダウンロード可能なサンプルをこの記事で説明した機能のすべてを示しています。 図 8 、映画のリストをサンプル 07 からこれらの機能のすべてを使用してレンダリングを示しています-tmpl -コンボ iterators.html ファイル。
.png)
図 8 それをすべてまとめること
カバー下の詳細
この列、JsRender の基本機能を示しますがはるかにカバーの下です。 たとえば、条件付きのタグが複数 {{}} タグの条件 (スイッチ/ケース ステートメント) などを含めることができますが、ある可能性がありますなど、カスタム タグを使用してこの状況に対処するには、掃除の方法があります。 JsRender JavaScript コード テンプレート、テンプレートのカプセル化にパス、顧客コンバーター関数を使用してオブジェクト グラフを移動する複雑なロジックは、ヘルパー関数は、カスタム タグをサポートします。 私はこれらの技術の次の問題のいくつかを見ていきます。
John Papa 、Microsoft の元のエバンジェ リスト、Silverlight と Windows の 8 チームが、彼は人気の Silverlight のテレビ番組のホストです。 彼は世界的に基調講演やセッションで発表している、ビルド、ミックス、PDC、TechEd、Visual Studio のライブを ！ DevConnections イベント。パパを Microsoft Regional Director は、コラムニスト forVisual Studio マガジン （パパの視点） は、Pluralsight のトレーニング ビデオの著者。彼は Twitter の上に従う twitter.com/john_papa。
この記事のレビュー、技術スタッフに感謝：Boris Moore