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

原创

编程圈子 2014-12-29 12:19:28 ©著作权

文章标签 js Javascript 模板引擎前端 html 文章分类 后端开发

©著作权归作者所有：来自51CTO博客作者编程圈子的原创作品，请联系作者获取转载授权，否则将追究法律责任

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