artTemplate は Tencent のオープンソースのフロントエンド テンプレート フレームワークであり、Mustache や Handlebars に似ており、Web プロジェクトで簡単に使用でき、Mustache を使用したことがある場合はすぐにテンプレート フレームワークに切り替えることができます。 。
学習プロセス:
1. 構文の紹介:
データバインディング: ビューとモデルが一方向のバインディングである点を除き、モデルが変更されるとビューは変更されますが、その逆は起こりません。
<script id="tpl1" type="text/template"> <h1>1、data mapping example</h1> <h2>{{message}}</h2> </script> //js中使用模板渲染 var data1 = {message:"hello,artTemplate is a javasript framework."}; $("node1").innerHTML = template("tpl1",data1);
条件判断: ここでは単一の if がサポートされており、else 分岐も追加できます。
{{if isShow}} <h3>(2、满足条件展示消息:{{message}}</h3> {{else}} <h3>(2x、条件不满足,展示默认消息</h3> {{/if}}
コレクションを走査します:
{{each list as item index}} <h3>the index of message is : {{index+1}} -> {{item}}</h3> {{/each}}
補助関数: 1->normal、0->error など、バックエンドによって要求されたデータをマッピングするために使用できます。これを使用する場合は、式の後に "|func" を渡すだけです (例: {{message | filterhandler}})。filterhandler はカスタム補助関数です。
まず補助関数を定義します。ここで定義するのは単純な日付形式変換関数です。
template.helper("date2str",function(date){ var today = new Date(date); var year = today.getFullYear(); var month = today.getMonth()+1; if(month<10)month = "0"+month; var day = today.getDate(); if(day<10)day = "0"+day; return year+"-"+month+"-"+day; });
補助関数を使用する
<p id="node4"></p> <script id="tpl4" type="text/template"> <h1>4、template.helper func example</h1> <h3>today is {{datenow | date2str}}</h3> </script> //js代码中调用 var data4 = {datenow:new Date()}; $("node4").innerHTML = template("tpl4",data4);
プリコンパイル: テンプレートの使用とは異なり、プリコンパイルには文字列型のドキュメント フラグメントが必要で、そのデータをレンダリングのためにプリコンパイルされたテンプレートに渡します。
var tpl5 = "<h1>5、compile example</h1><h3>this is a string the type is not {{type}}</h3>"; $("node5").innerHTML = template.compile(tpl5)({type:"text/template"});
引用サブテンプレート:
<p id="node6"></p> <script id="tpl6" type="text/template"> <h1>6、include child template example</h1> <p class="parenttemplate"> <h3>parent template</h3> {{include 'tpl6-child'}} </p> </script> <script id="tpl6-child" type="text/template"> <p class="childtemplate"> <h3>child template</h3> </p> </script>
2. template.js ライブラリをダウンロードし、HTML ファイルに導入します。
3. 前に紹介した構文の一部を練習するための包括的な例を次に示します。
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title>artTemplate example</title> <style type="text/css"> *{margin:0;} h1,h2,h3{margin:3px;} h2,h3{text-indent:20px;} .parenttemplate{background:#ccc;width:600px;height:60px;} .childtemplate{background:lightblue;} </style> <script type="text/javascript" src="template.js"></script> <script> function $(id){return document.getElementById(id);} window.onload = function(){ //data mapping var data1 = {message:"hello,artTemplate is a javasript framework."}; $("node1").innerHTML = template("tpl1",data1); //if condition var data2 = {isShow:true,message:"hello,template"}; $("node2").innerHTML = template("tpl2",data2); data2.isShow = false; $("node2x").innerHTML = template("tpl2",data2); //list foreach var data3 = {list:["Javascript","JQuery","artTemplate"]}; $("node3").innerHTML = template("tpl3",data3); //helper function template.helper("date2str",function(date){ var today = new Date(date); var year = today.getFullYear(); var month = today.getMonth()+1; if(month<10)month = "0"+month; var day = today.getDate(); if(day<10)day = "0"+day; return year+"-"+month+"-"+day; }); var data4 = {datenow:new Date()}; $("node4").innerHTML = template("tpl4",data4); //compile example var tpl5 = "<h1>5、compile example</h1><h3>this is a string the type is not {{type}} </h3>"; $("node5").innerHTML = template.compile(tpl5)({type:"text/template"}); $("node6").innerHTML = template("tpl6",{}); //escape html $("node7").innerHTML = template("tpl7",{message:"<span>escape html tag</span>"}); } </script> </head> <body> <p id="node1"></p> <script id="tpl1" type="text/template"> <h1>1、data mapping example</h1> <h2>{{message}}</h2> </script> <p id="node2"></p> <p id="node2x"></p> <script id="tpl2" type="text/template"> <h1>2、if condition example</h1> {{if isShow}} <h3>(2、满足条件展示消息:{{message}}</h3> {{else}} <h3>(2x、条件不满足,展示默认消息</h3> {{/if}} </script> <p id="node3"></p> <script id="tpl3" type="text/template"> <h1>3、list example</h1> {{each list as item index}} <h3>the index of message is : {{index+1}} -> {{item}}</h3> {{/each}} </script> <p id="node4"></p> <script id="tpl4" type="text/template"> <h1>4、template.helper func example</h1> <h3>today is {{datenow | date2str}}</h3> </script> <p id="node5"></p> <p id="node6"></p> <script id="tpl6" type="text/template"> <h1>6、include child template example</h1> <p class="parenttemplate"> <h3>parent template</h3> {{include 'tpl6-child'}} </p> </script> <script id="tpl6-child" type="text/template"> <p class="childtemplate"> <h3>child template</h3> </p> </script> <p id="node7"></p> <script id="tpl7" type="text/template"> <h1>7、escape html tag example</h1> <h3>origin expression : {{#message}}</h3> <h3>after escape ==> : {{message}}</h3> </script> </body> </html>
この例を実行してください。次の効果が得られます:
以上がJavaScript フロントエンド テンプレート エンジン フレームワーク artTemplate の使用の概要 - CSDN ブログの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。