templates_jqueryを使用してHTMLを生成するフレームワークjquery.tmplの使い方の詳細な説明

ページを更新するためのデータの動的リクエストは、ブログコメントのページング動的読み込み、Weibo のローリング読み込みおよびスケジュールされたリクエスト読み込みなど、現在では非常に一般的な方法です。

これらの場合、動的リクエストによって返されるデータは通常、組み立てられた HTML、JSON、または XML のいずれかです。つまり、データはブラウザー側ではなく、サーバー側で組み立てられます。ただし、HTML を返すのは送信量の点でコスト効率が悪く、Web 送信では XML よりも JSON が使用されるようになりました。

ブラウザ側でJSONに基づいてHTMLを生成する際に非常に面倒な点は、構造が複雑でないときは大丈夫ですが、一度構造が複雑になってしまうと非常に注意してJavaScriptを書く必要があることです。保守するのがほぼ不可能なコード。

そこで、テンプレートを使用して HTML を生成するフレームワークが次々と登場しています。jquery.tmpl もその 1 つです。

以下では、その使用方法に焦点を当てます:

まず、この 2 つは言うまでもなく必須です。

テンプレートを定義するには 2 つの方法があります。具体的なコードを以下に示します。

コードをコピーします コードは次のとおりです:

var markup = "

一部のコンテンツ: ${item}.
"
" その他のコンテンツ: ${myValue}.

";

$.template( "movieTemplate", マークアップ );

コードをコピー コードは次のとおりです:

このようにして 2 つのテンプレートが定義され、前者はスクリプトで記述され、後者は HTML で記述されます

データは json を使用します

以下のテンプレートのレンダリングを開始します

コードをコピーします コードは次のとおりです:

$( "#movieTemplate" ).tmpl( 映画 ).appendTo( "#movieList" );

$.tmpl( "movieTemplate", 映画 ).appendTo( "#movieList" );

注: ムービーは JSON データ配列です

コードをコピーします コードは次のとおりです:

var ムービー = [

{ 名前: "The Red Violin"、リリース年: "1998" }、
{ 名前: "アイズ ワイド シャット"、リリース年: "1999" }、
{ 名前: "The Inheritance"、リリース年: "1976" }
];

jquery.tmpl の一般的なタグは次のとおりです:

${}、{{each}}、{{if}}、{{else}}、{{html}}

一般的に使用されないタグ

{{=}}、{{tmpl}}、および {{wrap}}。

${} は {{=}} と同等であり、出力変数です。${} に式を置くこともできます (= と変数の間にはスペースが必要です。そうでない場合は無効になります)

例:

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var users = [{ ID: 'think8848', 名前: 'ジョセフ・チャン', 番号: '1', ステータス: 1 }, { ID: 'aCloud', 名前: 'メアリー・チャン', 番号: '2'}] ;
$("#demo").tmpl(users).appendTo('#div_demo');

{{each}} はループ ロジックを提供し、$value は反復変数にアクセスします。また、反復変数 (i, value)

をカスタマイズすることもできます。 例:

コードをコピー コードは次のとおりです:

{{if }} {{else}} 提供分支逻辑 {{else}} は、else if

に相当します

例：

复制代 代码如下:

{{html}} 出变量html、但し無しhtml编、适合输出html代码

实例

复制代 代码如下:

{{tmpl}} 嵌套模版

实例

复制代码代码如下:

<スクリプトタイプ="text/javascript">
　　var users = [{ ID: 'think8848', 名前: ['ジョセフ', 'チャン'] }, { ID: 'aCloud', 名前: ['メアリー', 'チャン']}];
   $("#tmpl1").tmpl(users).appendTo('#tmpl');

{{ラップ}}、包装機

实例

复制代 代码如下:

   

 <スクリプトタイプ="text/javascript">
        $(関数() {
            $('#myTmpl').tmpl().appendTo('#wrapDemo');
        });
   

$data $item $item は現在のモジュールを表します。$data は現在のデータを表します。 实例：

复制代码代码如下:

$.tmplItem() メソッド。このメソッドを使用すると、レンダリングされた要素から $item

を取得できます。

例

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
$('#demo').delegate('div', 'click', function () {
var item = $.tmplItem(this);
アラート(アイテム.データ名);
});