javascript的模板引擎art-template常用操作有哪些-创新互联

小编给大家分享一下javascript的模板引擎art-template常用操作有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

本篇文章给大家带来的内容是关于javascript的模板引擎art-template常用操作介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

分为原生语法和简洁语法，本文主要是讲简洁语法

基础数据渲染
输出HTML
流程控制
遍历
调用自定义函数方法
子模板引入
基础数据渲染
一、引入art-template.js文件

二、编写HTML模板

    
{{title}}

三、向模板插入数据，并输出到页面

var data = {
    title:"hello world"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;

输出HTML

    
{{title}}

//注意：{{title}}这是对内容编码输出，应该写成{{#title}}这是对内容不编码输出

    
{{#title}}


var data = {
    title:"
hello world
"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;

流程控制语句（if else）

{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}

art-template里面的流程控制就相对其他模板来说强大很多了，直接看例子吧

    

        {{if bok==22}}
        
线上
        {{else if bok==33}}
        
隐藏
        {{else}}
        
走这里
        {{/if}}
    

嵌套的写法

    

        {{if bok}}
            {{if list.length>=0}}
                {{each list}}
                    
{{$index}}:{{$value}}
                {{/each}}
            {{else}}
                
没有数据
            {{/if}}
        {{/if}}
    

循环遍历语句

{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}

    

        {{if c==100}}
            

                {{each person}}
                    

                        编号：{{$index+1}}--姓名：{{$value.name}}--年龄：{{$value.age}}
                    
                {{/each}}
            
        {{/if}}
    

调用自定义方法
通过template.helper(name,fnCallBack)注册方法
可以直接在{{}}中调用

    {{if c==100}}
        

            {{each person}}
                
姓名：{{$value.name}}--性别：{{show($value.sex)}}
            {{/each}}
        

    {{/if}}

调用子模板

{{include 'main'}} 引入子模板，数据默认为共享
{{include 'main' a}} a为制定数据，但是同样必须是父级数据，可以看看下面的例子，如果不注入的a的话，引入的子模板是接受不到数据的