JS 前端框架1 artTemplate前端js模板引擎

最新推荐文章于 2023-08-09 11:02:46 发布

编程圈子

最新推荐文章于 2023-08-09 11:02:46 发布

阅读量1.5w

点赞数

分类专栏： # JS-HTML 文章标签： js Javascript 模板引擎前端

本文链接：https://blog.csdn.net/xundh/article/details/42236477

版权

JS-HTML 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

以前写前端时，模板引擎是自己实现的一个简单方法。现在有了越来越多的开源产品，遂决定选定一种取代自己的模板引擎。大致挑选一下，决定使用artTemplate。

一、项目地址：

https://github.com/aui/artTemplate

二、使用方法：

参照官方写最简单的示例：

新建test.html，代码如下：

<html>
<body>
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

<div id="content"></div>
<script>
	var data = {
    		title: '标签',
    		list: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
	};
	var html = template('test', data);
	document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

三、其它语法：

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

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

定义扩展函数：

template.helper(name, callback)

四、requirejs使用template

require.config({
baseUrl: "../",
urlArgs: "bust=" + (new Date()).getTime(),
paths: {
"art-template":'Js/template'
}
});

define(['art-template'],function(template){

var html=template('id',obj);

});

五、 4.12版本使用

新版本的我没有找到template.js template-native.js。参照example/web-requirejs的示例，使用方式是：

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

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

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

{{/if}}
{{$data}}
</script>

<script>
require.config({
    paths: {
        'art-template': '../../lib/template-web'
    }
});

require(['art-template'], function(template) {
    var data = {
        title: '基本例子',
        isAdmin: true,
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;
});
</script>
</body>
</html>

可见需要引用的是/lib/template-web.js