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(&#39;content&#39;).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(&#39;test&#39;,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(&#39;test&#39;,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:[&#39;文艺&#39;, &#39;博客&#39;, &#39;摄影&#39;, &#39;电影&#39;, &#39;民谣&#39;, &#39;旅行&#39;, &#39;吉他&#39;]
        }
    };
    var html = template("test",data);
    document.getElementById("app").innerHTML=html;
</script>

。

以上がJavaScriptテンプレートエンジンの共通操作入門 art-templateの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。