JSON JQUERY テンプレートの実装手順_jquery-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:23:57

オリジナル

1082 人が閲覧しました

しかし、クライアント側でデータを再現することも大きな問題であり、特にテーブルなどの同じ構造を持つ大量のデータの場合、その処理方法は満足のいくものではありません。テンプレートコントロール、サーバー側の 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() " # >"; 
} 
 
 
使用方法: 