大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

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

建昌网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联建站于2013年开始到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站

本篇文章给大家带来的内容是关于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的话,引入的子模板是接受不到数据的


    
           {{each list}}             
  • {{$value}}
  •         {{/each}}     
    
        
                {{each person}}                 
  • {{$value.name}}
  •             {{/each}}         
        {{include 'main' a}}     

以上是“javascript的模板引擎art-template常用操作有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章名称:javascript的模板引擎art-template常用操作有哪些
网页链接:http://dzwzjz.com/article/ipejph.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP