.

关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析，本文只探讨如何使用。初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串，此为hardcode，而且拼接的过程很头疼，什么单引号双引号，符号嵌入多了就头晕眼花容易出错，如果会调试的话可以看到渲染模板的效率也很低下。本文将介绍一种新的利用模板引擎来渲染数据的方法。

（1）artTemplate基础使用方法
一：简洁语法版
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
<script type="text/javascript" src="js/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list value i}}
<li>索引{{i+1}}：{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
title: '基本例子',
isAdmin:true,
list:['文艺','博客','摄影']
};
var html = template('test',data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

二：原生语法版
原生语法就是定义模板的js格式不一样，有点像jsp的语法，不过我个人建议使用简洁版，以为没有这么多的符号，方便哈。

<script id="test" type="text/html">
<%if(isAdmin){%>
<% for(var i=0; i<list.length; i++){%>
<div><%=i%>:<%=list[i]%></div>
<%}%>
<%}else{%>
<div>没有结果！</div>
<%}%>
</script>

（2）artTemplate模板定义方式
一：javascript定义html模板
这种方法如上<script id="test" type="text/html"> 这里的type必须为”text/html”, 必须定义id。

二：用变量的形式存储模板
<!DOCTYPE html>
<html>
<head>
<title>demo2</title>
<script type="text/javascript" src="js/template-web.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var source = '<ul>'
+ '{{each list value i}}'
+ '<li>索引 {{i + 1}} ：{{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

这里又出现了讨厌的字符串拼接，所以我又不喜欢了，还是建议用第一种方式。

（3）ajax结合artTemplate模板
假设可以通过/test.php 获取json数据，数据如下：

{
result:[
{
id:1,
name: 'zhangsan'
},
{
id:2,
name: 'lisi'
},
],
error_code:"200"
}

需要数据绑定到html页面:

<div id="content"><div>
1
javascript定义模板：

<script id="search" type="text/html">
<ul>
{{each result value i}}
<li>name{{i+1}}：{{value.name}}</li>
{{/each}}
</ul>
</script>

ajax请求数据的方式为：

$.ajax({
type: 'post',
url:'/test.php',
success: function(res){
var result = res.result;
var $html = template("search",result);
$("#content").html($html);
}
});

以下为基础语法：

变量
标准语法{{set temp = data.sub.content}}
原生语法<% var temp = data.sub.content; %>

自定义过滤器filter
注册过滤器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};
1
2
标准语法：

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
1
原生语法：

<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>
1
子模板
标准语法：

{{include './header.art'}}
{{include './header.art' data}}
1
2
原生语法：

<% include('./header.art') %>
<% include('./header.art', data) %>
1
2
模板继承
标准语法：

{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

原生语法：

<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例：

<!--layout.art-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{block 'title'}}My Site{{/block}}</title>
{{block 'head'}}
<link rel="stylesheet" href="main.css">
{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>

<!--index.art-->
{{extend './layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'head'}}
<link rel="stylesheet" href="custom.css">
{{/block}}
{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

渲染 index.art 后，将自动应用布局骨架。

其他文档详见：art-template官方文档

前端模板引擎artTemplate.js的更多相关文章

  1. 前端模板引擎doT.js的用法

    简介 一款简单好用的前端模板引擎 用法 <script type="text/javascript" src="js/doT.min.js">< ...

  2. JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  3. 前端模板引擎doT.js的使用

    前言 我们在做前端开发时,经常需要根据后台返回的json数据动态生成html并插入到页面中显示.最简单的方法就是通过jQuery去遍历数据拼接html,如以下: <script> var ...

  4. JavaScript模板引擎artTemplate.js——结语

    再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是 ...

  5. JavaScript模板引擎artTemplate.js——如何引入模板引擎？

    artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...

  6. JavaScript模板引擎artTemplate.js——两种方法实现性别的判定

    template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...

  7. JavaScript模板引擎artTemplate.js——是否编码输出html字符

    template.config(name, value)方法用于更改引擎的默认配置. 其中字段escape,类型为boolean,默认为true. 首先,我们不修改配置信息输出一段带有html标签的字 ...

  8. JavaScript模板引擎artTemplate.js——引入子模板

    之前的例子都是单一结构的对象,如果遇到复杂对象结构,我们可以通过引入子模板来实现html的渲染. 依旧以之前的数据作为例子: <div id="content">< ...

  9. JavaScript模板引擎artTemplate.js——template.compile()方法

    template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...

随机推荐

  1. 1-7docke的网络模式

    1.Bridge模式 bridge 模式是 docker 的默认⽹络模式,不写 –net 参数,就是 bridge 模式.比如使⽤ docker run - p 时 工作模式从网上找了一个,如下 例子 ...

  2. Adobe Audition cc 修改音频 --- 淡出、淡入，合并、裁剪

    ​1.导入音频到Adobe Audition cc中支持多个音频操作 也可以使用鼠标把音频放入其中 2.淡出淡入: 红色圈中的就是淡出淡入的控制符 左手按住ctrl 或者 shift 键  右手按住鼠 ...

  3. Mysql 数据库 表中列的操作

    [1]Mysql数据库中表的列操作 Mysql中关于表中列的操作集语句: -- [1]增加一列 ) DEFAULT NULL COMMENT '目的码区号'; -- [2]增加一列,在dnis_are ...

  4. C++分治策略实现线性时间选择

    问题描述: 给定线性序集中n个元素和一个整数k,1≤k≤n,要求找出这n个元素中第k小的元素,即如果将这n个元素依其线性序排列时,排在第k个的元素即为要找到元素. 细节须知:(与之前的随笔相比) (1 ...

  5. Go在windows下执行命令行指令

    需要在Go写的服务里面调用命令行或者批处理,并根据返回的结果做处理. 在网上搜索了一翻,验证成功,现记录如下: cmd := exec.Command("cmd") // cmd ...

  6. 使用el-dialog时，报错“Unknown custom element:<el-dialog> did you register the component correctly?...make sure to provide the 'name' option”

    初学vue时,曾遇到一个无语的问题,在用el-dialog时一直显示没有导入,结果发现是因为没有把element ui引入到项目里. 需进行以下步骤: 1.执行: npm install elemen ...

  7. Linux学习笔记之rsync配置

    0x00 rsync 简介 Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件,也可以使用 Rsync 同步本地硬盘中的不同目录. ...

  8. 发送邮件使用html模板的实现的大致思路

    客户最近有一个需求,大致的意思是提供一个 word文档,让其作为一个模板,在发送邮件的时候能够实现按照这个模板的样式和内容,替换其中 的一些字段,作为邮件的内容发给收件人.这个需求最大的问题就是在于这 ...

  9. Angular复习笔记7-路由（上）

    Angular复习笔记7-路由(上) 关于Angular路由的部分将分为上下两篇来介绍.这是第一篇. 概述 路由所要解决的核心问题是通过建立URL和页面的对应关系,使得不同的页面可以用不同的URL来表 ...

  10. ProviderManager

    类ProviderManager java.lang.Object继承 org.jivesoftware.smack.provider.ProviderManager public final cla ...