artTemplate 引入模板页

参考资料:https://github.com/aui/artTemplate

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

一:安装使用

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

artTemplate 引入模板页_第1张图片

引入代码:

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

二:最基本的使用方法

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


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

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

{{title}}</h1>
    {{each list as value i}}
  • 索引 {{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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

效果展示: 
artTemplate 引入模板页_第2张图片

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

原生写法:

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

    <%for (var i=0;i
        <div><%=i%>. <%=list[i].user%>div>
    <%}%>
<%}%>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

不重新命名的写法:

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

    {{each list}}
        <div>{{$index}}. {{$value.user}}div>
    {{/each}}
{{/if}}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

总结,原生写法太过麻烦,不需要深究,推荐使用简易写法,我们可以使用{{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}}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

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

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

你可能感兴趣的:(artTemplate 引入模板页)