JSON JQUERY テンプレートの実装手順_jquery

しかし、クライアント側でデータを再現することも大きな問題であり、特にテーブルなどの同じ構造を持つ大量のデータの場合、その処理方法は満足のいくものではありません。テンプレート コントロール、サーバー側の asp.net Gridview またはリピーターのようなものがはるかに優れています。最近、非常に優れたソリューションを見つけました。使いやすいと同時に、このソリューションはわずか数回で完成しました。他の人が数十、場合によっては数百の JS ライブラリを使用して実行するコードは、John Resig の Master Rick Strahl の記事で詳しく説明されています (ここでは、Jquery を使用したクライアント テンプレート)。中国人の学習を促進するためのコア部分。

次のプログラムはマイクロテンプレート エンジンです。

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

var _tmplCache = {}
this.parseTemplate = function(str, data) {
///

/// を使用するクライアント側のテンプレート パーサー<#= # > および <# code #> 式
/// および # # コード ブロック
/// 注: 場合によっては、ドキュメント内で一重引用符が使用できなくなります。
// / テキスト内のリテラルには ' を使用し、単一引用符は避けてください。
///
/// ///
/// 任意のデータオブジェクトを渡すと、
/// そのオブジェクトのプロパティが変数として表示されます。
///
var err = "";
try {
var func = _tmplCache[str];
if (!func) {
var strFunc =
"var p=[ ],print=function() {p.push.apply(p,arguments);};"
"with(obj){p.push('"

str.replace(/[rtn ]/g, " ")
.replace(/'(?=[^#]*#>)/g, "t")
.split("'").join("\' ")
.split ("t").join("'")
.replace(//g, "',$1,'")
.split("< #").join("');")
.split("#>").join("p.push('")
"');} return p.join('' );";

//alert(strFunc);
func = new Function("obj", strFunc);
_tmplCache[str] = func;
}
return func(data);
} catch (e) { err = e.message; }
return "< # エラー: " err.htmlEncode() " # >";
}


使用方法:

コードをコピー コードは次のとおりです:parseTemplate($("#ItemTemplate").html(),{ 名前: "rick"、住所: { 通り: "32 kaiea"、都市: "paia"} } ); >上記のプログラムで使用されているテンプレート:

コードをコピー

コードは次のとおりです:< ;script id="ItemTemplate" type="text/html"> ;

<#= name #>

<#= address.street #> ;

ループを使用する場合:

code

コードは次のとおりです。 $.each(dataarray,function(index,dataItem){ parseTemplate($("#ItemTemplate").html( ), dataItem ); })

とてもシンプルでエレガントですね。