artTemplate 引入模板页

以上是官方文档以及下载地址。

一：安装使用

下载artTemplate后，找到template.js，引入到页面即可

这里写图片描述

引入代码：

<script type="text/javascript" src="artTemplate/dist/template.js"></script>

二：最基本的使用方法

官方给出的小demo就是最基本的使用方法：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>

<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}

<h1>{{title}}</h1>
<ul>
    {{each list as 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>

效果展示：
这里写图片描述

其实上诉例子给出的写法并不是唯一的写法，还有原生的写法和不重新命名的写法

原生写法：

扫描二维码关注公众号，回复： 1485173 查看本文章

<%if (admin){%>
    <%include('admin_content')%>

    <%for (var i=0;i<list.length;i++) {%>
        <div><%=i%>. <%=list[i].user%></div>
    <%}%>
<%}%>

不重新命名的写法：

{{if admin}}
    {{include 'admin_content'}}

    {{each list}}
        <div>{{$index}}. {{$value.user}}</div>
    {{/each}}
{{/if}}

总结，原生写法太过麻烦，不需要深究，推荐使用简易写法，我们可以使用{{each list as value i}}，
为每一项和其序号重新命名成value，i。这样，在后面只需要使用value和i即可。我们也可以不重新命名，直接使用{{each list}}，但这样的话，后面的需要使用$加index和value。

三：引入模板页的写法

上诉的基本写法，是将模板写在页面内的，但是我们在实际开发中，一般不会将模板和js写在页面内，所以，我们会单独写一个模板页，并将其引入到页面内，进行模板替换，如果是这样的话，我们就需要对调用template的方法进行一些小小的调整，具体如下：

1.构建模板页
这里写图片描述

2.模板页代码

{{if isAdmin}}

<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
    <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>

{{/if}}

3.进行模板替换
由于模板是单独写在一个页面的，所以我们需要ajax的get方法获取到模板页，然后在进行模板替换。

<script>
var obj = {
    title: '模板页获取例子',
    isAdmin: true,
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html=$.get('list-template.html',function (data) {
    var render = template.compile(data);
    var str = render(obj);

    document.getElementById('content').innerHTML = str;
})
</script>

这里，我使用的是jquery的get方法获取模板页，然后再利用template.compile()获取渲染内容，然后将数据obj渲染进去，最后添加到页面里即可。

注意：这时候就不能使用template()方法进行模板替换了，必须使用template.compile()及render()进行模板替换才行。

artTemplate 引入模板页

猜你喜欢