前端 -＞ Art-template 第一个官方实例

欧皇小德子

已于 2022-02-16 16:53:14 修改

阅读量201

点赞数

分类专栏：前端文章标签：前端 javascript html

于 2020-12-05 15:42:35 首次发布

本文链接：https://blog.csdn.net/rod0320/article/details/110682986

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

上结果:

在这里插入图片描述

目录结构:

在这里插入图片描述

html:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>basic-demo</title>
    <!-- 引入js文件-->
    <script src="../../lib/template-web.js"></script>
</head>

<body>

<div id="content">

</div>
<!-- 编写模板,此模板放在html页面中,模板也可放在js文件中 -->
<script id="contentTemplate" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{each list}}
        <li>索引 {{$index + 1}} ：{{$value}}</li>
        {{/each}}
    </ul>
    <!--as value:遍历.as重命名 i索引-->
    <h1>{{title}}</h1>
    <ul>
        {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
        {{/each}}
    </ul>
</script>
<!-- 渲染模板 -->
<script type="text/javascript">
    var data = {// 准备模板中涉及的数据
        title: '标签',
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template("contentTemplate", data);// 调用template()方法将模板与数据结合进行渲染
    document.getElementById('content').innerHTML = html;// 将渲染结果写入div
</script>

</body>
</html>

方法

template(id,data)

返回渲染结果
内部根据document.getElementById(id)查找模板
如果没有data参数，返回一个渲染函数

template(id, data)
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。

如果没有 data 参数，那么将返回一渲染函数。

template.compile(source, options)
将返回一个渲染函数。演示

template.render(source, options)
将返回渲染结果。

template.helper(name, callback)
添加辅助方法。

例如时间格式器：演示

template.config(name, value)
更改引擎的默认配置。

欧皇小德子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录