art-template4.0使用

時間 2019-11-17

標籤 art template4.0 template 使用简体版

原文原文鏈接

art-template

javascript 模板引擎，官網：https://github.com/aui/art-templatejavascript

分爲原生語法和簡潔語法，本文主要是講簡潔語法html

基礎數據渲染
輸出HTML
流程控制
遍歷
調用自定義函數方法
子模板引入

基礎數據渲染

1、引入art-template.js文件java

<script src="template-debug.js"></script>

2、編寫HTML模板git

<script id="test" type="text/html">
    <h1>{{title}}</h1>
</script>

3、向模板插入數據，並輸出到頁面github

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}}這是對內容不編碼輸出app

<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>

嵌套的寫法ui

<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)註冊方法能夠直接在{{}}中調用debug

<script id="test" type="text/html">
<div>
    {{if c==100}}
        <ul>
            {{each person}}
                <li>姓名：{{$value.name}}--性別：{{$value.sex|show}}</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.defaults.imports.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;
    var html = template("test",data);
    document.getElementById("app").innerHTML = html;
</script>

調用子模板

{{include 'main'}} 引入子模板，數據默認爲共享 {{include 'main' a}} a爲制定數據，可是一樣必須是父級數據，能夠看看下面的例子，若是不注入的a的話，引入的子模板是接受不到數據的

<body>
<div id="app"></div>
<script src="template-debug.js"></script>
<script id="main" type="text/html">
    <ul>
       {{each list}}
            <li>{{$value}}</li>
        {{/each}}
    </ul>
</script>
<script id="test" type="text/html">
    <div>
        <ul>
            {{each person}}
                <li>{{$value.name}}</li>
            {{/each}}
        </ul>
        {{include 'main' a}}
    </div>
</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>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。