jQuery_jquery に基づく JavaScript テンプレートエンジン JsRender の使用ガイド-jsチュートリアル-php.cn

jQuery_jquery に基づく JavaScript テンプレートエンジン JsRender の使用ガイド

WBOY

リリース： 2016-05-16 16:23:34

オリジナル

1385 人が閲覧しました

はじめに

JsRender は、jQuery に基づく JavaScript テンプレートエンジンであり、次の特徴があります。

· シンプルで直感的

· 強力な機能

· 拡張可能

· 電光石火のような速さ

これらの機能は非常に強力に見えますが、ほぼすべてのテンプレートエンジンがこのように宣伝します。。。

仕事の必要により、Xiaocai はこのテンプレートエンジンにアクセスしました。しばらく使ってみて、確かに比較的強力であることがわかりましたが、Xiaocai は一部の部分が強力すぎて理解するのが難しいと感じています。

一方、JsRender の公式ドキュメントは比較的詳細に記載されていますが、問題が発生した場合にそれ以外の情報が驚くほど少ないだけでなく、関連する問題も見つけることができません。結果はほとんどありません。

さらに、JsRender の一部の部分は理解するのが非常に難しいため、Xiaocai はいくつかの「ベストプラクティス」を緊急に共有する必要があります。

最近の使用に基づいて、Xiaocai はいくつかの実践的な経験をまとめました。もちろん、これらの経験は公式文書には見つかりません。

注: この記事は基本的な入門チュートリアルではありません。理解できない場合は、読者が独自に説明する必要はありません。

ネストされたループは #parent を使用して親データにアクセスします (推奨されません)

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

   <頭>

     嵌套循環环使用#parent访问父级数据 --- by 杨元
     <スタイル>

       <表>
         <頭>

             序号
             姓
             家庭成员

     <スクリプト>
       //データソース
       var dataSrouce = [{
         名前: "张三"、
         家族: [
           "爸爸"、
           "妈妈"、
           「哥哥」
         ]
       }、{
         名前: "李四"、
         家族: [
           "爷爷"、
           "奶奶"、
           「叔叔」
         ]
       }];
       //渲染データベース
       var html = $("#testTmpl").render(dataSrouce);
       $("#list").append(html);

ネストされたループはパラメータを使用して親データにアクセスします (推奨)

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

<頭>

ネストされたループはパラメータを使用して親データにアクセスします --- by Yang Yuan
<スタイル>

<スクリプト>
//データソース
var dataSrouce = [{
名前: "张三"、
ファミリー: [
「お父さん」、
「お母さん」、
「お兄さん」
]
}、{
名前: "李思",
ファミリー: [
「おじいちゃん」、
「おばあちゃん」、
「おじさん」
]
}];
//データのレンダリング
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);

カスタムタグで else を使用する (強く推奨されません)

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

     自定义标签中使用else --- by 杨元

名称	单价

<スクリプト>
//データソース
var dataSrouce = [{
名前: "Apple"、
価格: 108
}、{
名前: "ヤリ"、
価格: 370
}、{
名前: "ピーチ"、
価格: 99
}、{
名前: "パイナップル"、
価格: 371
}、{
名前: "オレンジ"、
価格: 153
}];
//カスタムタグ
$.views.tags({
"isShow": 関数(価格){
var temp=price ''.split('');
If(this.tagCtx.props.status === 0){
// 価格が水仙の数であるかどうかを判断し、そうである場合は表示し、そうでない場合は表示しません
if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10) ),3))){
return this.tagCtxs[0].render();
}else{
return this.tagCtxs[1].render();
}
}その他{
return "";
}
}
});
//データのレンダリング
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);

カスタムタグの代わりにヘルパーを使用する (推奨)

コードをコピー

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

     用helper代替自定义标签 --- by 杨元

名称	单价

<スクリプト>
//データソース
var dataSrouce = [{
名前: "Apple"、
価格: 108
}、{
名前: "ヤリ"、
価格: 370
}、{
名前: "ピーチ"、
価格: 99
}、{
名前: "パイナップル"、
価格: 371
}、{
名前: "オレンジ"、
価格: 153
}];
//ヘルパー
$.views.helpers({
"isShow": 関数(価格){
var temp=price ''.split('');
if(price==(Math.pow(parseInt(temp[0],10),3) Math.pow(parseInt(temp[1],10),3) Math.pow(parseInt(temp[2],10) ),3))){
true を返す;
}その他{
return false;
}
}
});
//データのレンダリング
var html = $("#testTmpl").render(dataSrouce);
$("#list").append(html);

デモコードパッケージのダウンロード:
http://xiazai.jb51.net/201412/yuanma/JsRender_Demo(jb51.net).rar

jQuery_jquery に基づく JavaScript テンプレート エンジン JsRender の使用ガイド

jQuery_jquery に基づく JavaScript テンプレートエンジン JsRender の使用ガイド