arttemplate

最新推荐文章于 2025-08-20 15:37:55 发布

转载最新推荐文章于 2025-08-20 15:37:55 发布 · 55 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/fengshuzi/blog/674099

文章标签：

#python #javascript #ViewUI

本文介绍如何使用ArtTemplate模板引擎，包括基本用法、条件判断、循环遍历等，并演示了如何将模板HTML从页面中获取及进一步封装的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1、html


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
</head>

<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>

　<script src="../lib/require.js" data-main="arttemplateTest"></script>
</body>
</html>

2、js

require(['template'], function (template) {
	console.log(template.compile);
	var source = '<ul>' + '{{each list as value i}}' + '<li>索引 {{i + 1}} ：{{value}}</li>' + '{{/each}}' + '</ul>';

	var render = template.compile(source);
	var html = render({
		list: ['摄影', '电影', '民谣', '旅行', '吉他']
	});
	document.getElementById('content').innerHTML = html;
});

3、进一步封装

api好像不好记，进行进一步封装

	common.render = function (data, source) {
		var render = null;
		if (data instanceof Array) {
			source = '{{each list as item i}}' + source + '{{/each}}';
			render = template.compile(source);
			return render({"list": data});
		} else {
			render = template.compile(source);
			return render(data);
		}
	};

4、假设从页面中获取模板html

	/**
	 * html模板直接从页面中拿，页面模板在页面中先隐藏
	 */
	common.renderById = function (data, id) {
		var source = $("#" + id).html();
		var render = null;
		var html = null;
		if (data instanceof Array) {
			source = '{{each list as item i}}' + source + '{{/each}}';
			render = template.compile(source);
			html = render({"list": data});
		} else {
			render = template.compile(source);
			html = render(data);
		}
		$("#" + id).html(html);
		$("#" + id).show();
	};

5、字符串不转义

${#var}

6、if else

{{if dataList}}
    {{each dataList as v i}}
        <li style="cursor: pointer;" provinceId="{{v.id}}">{{v.name}}</li>
    {{/each}}
{{/if}}

{{if cityList}}
    {{each cityList as v i}}
        <li style="cursor: pointer;" provinceId1="{{id}}" cityId="{{v.id}}">{{v.name}}</li>
    {{/each}}
{{/if}}

{{if districtList}}
    {{each districtList as v i}}
        <li style="cursor: pointer;" cityId1="{{id}}" districtId="{{v.id}}">{{v.name}}</li>
    {{/each}}
{{/if}}