art-template
javascript 模板引擎,官网:
分为原生语法和简洁语法,本文主要是讲简洁语法
- 基础数据渲染
- 输出HTML
- 流程控制
- 遍历
- 调用自定义函数方法
- 子模板引入
基础数据渲染
一、引入art-template.js文件
二、编写HTML模板
三、向模板插入数据,并输出到页面
var data = { title:"hello world"};var html = template("test",data); document.getElementById('content').innerHTML = html;
输出HTML
//注意:{
{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里面的流程控制就相对其他模板来说强大很多了,直接看例子吧嵌套的写法
循环遍历语句
{
{each name}}索引:{ {$index}}值:{ {$value}}{ {/each}}调用自定义方法
通过template.helper(name,fnCallBack)注册方法
可以直接在{ {}}中调用调用子模板
{
{include 'main'}} 引入子模板,数据默认为共享{ {include 'main' a}} a为制定数据,但是同样必须是父级数据,可以看看下面的例子,如果不注入的a的话,引入的子模板是接受不到数据的