JsRender実践入門チュートリアル_JavaScriptスキル-jsチュートリアル-php.cn

JsRender実践入門チュートリアル_JavaScriptスキル

WBOY

リリース： 2016-05-16 16:32:36

オリジナル

1692 人が閲覧しました

この記事は、JsRender の実践的な入門チュートリアルです。例では、else タグ、ネストされたループを使用して親データやその他の知識ポイントにアクセスする方法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

はしがき

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
<スタイル>

<表>
＆lt; th width = "10％"＆gt; serial number＆lt;/th＆gt;

<スクリプト>
//データソース
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();
}その他{
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);