专栏首页OECOMArtTemplate模板的使用(二)

ArtTemplate模板的使用(二)

2017-05-11 03:58:51

上一篇文章说了artTemplate的最基本的用法,它还有一个方法就是使用模板的方式,template的compile();

代码如下

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

<body>
<h1>在javascript中存放模板</h1>
<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>

其输出效果和上一遍文章输出效果相同,这里不再赘述,其实个人认为还是第一种方式比较好,避免了字符串的这种拼接,在开始写的时候会更加的方便。

artTemplate还有一个比较好用的方法时include,增加了代码的复用。

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

<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
    {{each list value i}}
        <li>索引 {{i + 1}} :{{value}}</li>
    {{/each}}
</ul>
</script>

<script>


var data = {
	title: '嵌入子模板',
	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • artTemplate模板的使用(一)

    artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无...

    无邪Z
  • 根据两点经纬坐标计算两点间的距离

    在进行地图一类的开发中经常会遇到需要计算两点之间的距离,下来看以下如何通过经纬坐标来确定两点间的距离

    无邪Z
  • Jquery DataTable 的学习之基础配置(二)

    本文将介绍jquery DataTable的一些基础配置,如分页、排序、过滤等,代码如下

    无邪Z
  • vue框架入门和ES6介绍

    vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等。

    达达前端
  • 算法与数据结构(七) AOV网的拓扑排序(Swift版)

    今天博客的内容依然与图有关,今天博客的主题是关于拓扑排序的。拓扑排序是基于AOV网的,关于AOV网的概念,我想引用下方这句话来介绍: AOV网:在现代化管理中...

    lizelu
  • Python结合jquery Ajax 的实例

    jQuery对Ajax的操作进行了封装。jQuery中.ajax()属于最底层的方法。 先来看一个简单的例子:

    赵云龙龙
  • win10锁屏界面无法更新

    Jetpropelledsnake21
  • RxJava小考题 -- Rxjava源码分析(一)

    现在面试很多都会问RxJava的源码,直接讲RxJava的源码,估计大家都不太会看下去,我们先看个小考题,然后再去看相关的源码。

    青蛙要fly
  • Onlyoffice不打开文档的情况下下载正在编辑的文档

    文档管理平台上列表显示了文档,假如一个文档有人已经打开了在编辑,而正在编辑的文档由于未触发保存机制,所以文档管理系统里存在硬盘的文档是旧的。此时,其他用户也进入...

    hotqin888
  • SQL*PLUS技巧:生成易读的HTML报表

    TeacherWhat

扫码关注云+社区

领取腾讯云代金券