artTemplate中引入外部模板

官方

可突破浏览器限制,让前端模板拥有后端模板一样的同步“文件”加载能力:

  1. 按文件与目录组织模板

    1
    1.template('tpl/home/main', data)
  2. 模板支持引入子模板

    1
    1.{{include '../public/header'}}:

实际使用无效

参考 : YZiAngel的博客

  • 想要引入外部的数据,需要搭建服务器环境,利用ajax获取

第一种方式 获取json数据

将模板代码写成字符串保存在一个json中,例

1
2
3
{
"header":"<h1 class='logo'></h1><a href='#' class='download'></a>"
}

构建函数,然后调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* 公共模板
* @param ele 模板添加的父容器
* @param url json文件的地址
* @param jsonKey 数据key
* @param res 需要替换的数据
*/
function addCommonJson(ele, url, jsonKey, res) {
$.ajax({
type: "get",
url: url,
dataType: "json",
success: function (data) {
var result = template.compile(data[jsonKey]);
$(ele).html(result(res));
}
})
}
addCommonJson("header", "./template/common.json", "header", null);

如果想要动态添加数据,将动态数据作为最后一个参数。

第二种方式 直接引入HTML文件

直接将模板代码写在一个新的HTML中(不需要写多余标签),例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
//将模板内容包裹在一个div中,需要添加ID(通过id找到对应模板)
<div id="header">
<h1 class="logo"><a href="#"></a></h1>
<a href="#" class="download"><img src="./images/header_app.png" alt=""></a>
</div>
<div id="footer">
{{each result as value}}
<li>
<a href="#" class="title" data-id="{{ value.titleId }}">{{ value.title }}</a>
<table>
</table>
</li>
{{/each}}
</div>

在需要调用模板的页面构建函数,然后调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
* html公共模板
* @param ele 父容器
* @param url 模板文件地址(url)
* @param temId 模板id
* @param res 后台数据
*/
function addCommonHtml(ele, url, temId, data) {
var objE = document.createElement("div");
$.ajax({
type: "get",
url: url,
// dataType:"html",
success: function (res) {
objE.innerHTML = res;
var result = template.compile(objE.children[temId].innerHTML);
$(ele).html(result(data));
}
})
}
//如果没有要动态替换的数据,参数data为null
addCommonHtml("header", "./template/common.html", "header", null);

如果想要动态添加数据,将动态数据作为最后一个参数。

0%