ホームページ > 記事 > ウェブフロントエンド > JavaScriptテンプレートエンジンの共通操作入門 art-template
この記事では、JavaScript テンプレート エンジン art-template の一般的な操作について説明します。必要な方は参考にしていただければ幸いです。 。 ヘルプ。
art-template
JavaScript テンプレート エンジン、公式 Web サイト: https://github.com/aui/art-template
分ネイティブ構文と簡潔構文については、この記事では主に簡潔構文について説明します
基本的なデータ レンダリング
出力 HTML
プロセス制御
トラバーサル
カスタム関数メソッドの呼び出し
サブテンプレートの紹介
基本的なデータのレンダリング
1. art-template.js ファイルを導入します
<script src="template-debug.js"></script>
2. HTML テンプレートを記述します
<script id="test" type="text/html"> <h1>{{title}}</h1> </script>
3。ページ
var data = { title:"hello world" }; var html = template("test",data); document.getElementById('content').innerHTML = html;
出力HTML
<script id="test" type="text/html"> <h1>{{title}}</h1> </script>
//注: {{title}} これはコンテンツがエンコードされた出力であり、{{#title}} として記述する必要があります。これはコンテンツです。エンコードされていない出力
<script id="test" type="text/html"> <h1>{{#title}}</h1> </script> var data = { title:"<p>hello world</p>" }; var html = template("test",data); document.getElementById('content').innerHTML = html;
プロセス制御ステートメント (if else)
{{if value}} ... {{else if value}} ... {{else}} ... {{/if}}
art-template のプロセス制御は他のテンプレートよりもはるかに強力です。例を見てください
<script id="test" type="text/html"> <div> {{if bok==22}} <h1>线上</h1> {{else if bok==33}} <h2>隐藏</h2> {{else}} <h3>走这里</h3> {{/if}} </div> </script> <script> var data = { "bok":22 }; var html = template('test',data); document.getElementById("app").innerHTML = html; </script>
ネストされた記述メソッド
<script id="test" type="text/html"> <div> {{if bok}} {{if list.length>=0}} {{each list}} <p>{{$index}}:{{$value}}</p> {{/each}} {{else}} <p>没有数据</p> {{/if}} {{/if}} </div> </script> <script> var data = { "bok":true, list:["a","b","c"] }; var html = template('test',data); document.getElementById("app").innerHTML = html; </script>
ループトラバーサルステートメント
{{each name}} 索引:{{$index}} 值:{{$value}} {{/each}}
<script id="test" type="text/html"> <div> <ul> {{if c==100}} <ul> {{each person}} <li> 编号:{{$index+1}}--姓名:{{$value.name}}--年龄:{{$value.age}} </li> {{/each}} </ul> {{/if}} </ul> </div> </script> <script> var data = { c:100, person:[ {name:"jack",age:18}, {name:"tom",age:19}, {name:"jerry",age:20}, {name:"kid",age:21}, {name:"jade",age:22} ] }; var html = template("test",data); document.getElementById("content").innerHTML = html; </script>
カスタムメソッドを呼び出す
template.helper(name,fnCallBack)を通じてメソッドを登録
{{}}で直接呼び出すことができます
<script id="test" type="text/html"> <div> {{if c==100}} <ul> {{each person}} <li>姓名:{{$value.name}}--性别:{{show($value.sex)}}</li> {{/each}} </ul> {{/if}} </div> </script> <script> var data = { c:100, person:[ {name:"jack",age:18,sex:1}, {name:"tom",age:19,sex:0}, {name:"jerry",age:20,sex:0}, {name:"kid",age:21,sex:1}, {name:"jade",age:22,sex:0} ] }; //自定义函数 template.helper("show",function(sex){ console.log(sex);//同样可以打印日志到控制台 if(sex==0){ return "男" }else if(sex==1){ return "女" } }); var html = template("test",data); document.getElementById("app").innerHTML = html; </script>
サブテンプレートの呼び出し
{{include 'main'}} はサブテンプレートを導入します。データはデフォルトで共有されます
{{include 'main' a}} a はデータを指定します。ただし、データの場合は親である必要があります。次の例を参照してください。 が挿入されていない場合、導入されたサブテンプレートはデータを受信できません
<script src="template-debug.js"></script> <script> var data = { person:[ {name:"jack",age:18}, {name:"tom",age:19}, {name:"jerry",age:20}, {name:"kid",age:21}, {name:"jade",age:22} ], a:{ list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] } }; var html = template("test",data); document.getElementById("app").innerHTML=html; </script>。
以上がJavaScriptテンプレートエンジンの共通操作入門 art-templateの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。