artTemplate模板试用

最新推荐文章于 2022-05-01 08:30:56 发布

baiding1123

最新推荐文章于 2022-05-01 08:30:56 发布

阅读量556

点赞数

分类专栏： JavaScript基础知识文章标签： js模板-js高性能

本文链接：https://blog.csdn.net/baiding1123/article/details/52951408

版权

JavaScript基础知识专栏收录该内容

17 篇文章 0 订阅

订阅专栏

https://github.com/aui/artTemplate
使用了id渲染模板和添加辅助方法，如果渲染中需要调用函数，需要用template.helper方法注册：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="../dist/template.js"></script>
</head>

<body>
    <div id="content"></div>
    <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
            <li>索引{{ i + 1}} : {{value}}</li>
            {{/each}}
        </ul>
        {{if conentFlag}}
        {{each artic as item i}}
        <div>
            <h3>标题{{i + 1}} : {{item.name}}</h3>
            <p>内容: {{item.content}}</p>
            <em>发表季节: {{item.month | whichSeason}} </em>  <!--调用方法-->
        </div>
        {{/each}}
        {{/if}}
    </script>
    <script>
    // <!-- 如果需要调用外部函数就需要添加辅助方法  -->
    template.helper('whichSeason', function(month){
        var s = "";
        switch(month){
            case 1 :
            case 2 :
            case 3 :
                s = '春季';
                break;
            case 4 :
            case 5 :
            case 6 :
                s = '夏季';
                break;
            case 7 :
            case 8 :
            case 9 :
                s = '秋季';
                break;
            case 10 :
            case 11 :
            case 12 :
                s = '冬季';
                break;
            default:
                s = '未知';
                break;
        }
        return s;
    });

    var data = {
        title: '模板测试',
        list: ['文艺', '博客', '摄影', '展览','电影','民谣','旅行','吉他'],
        conentFlag : true,
        artic : [{name : '成为前端高手', content: '如何在一年之内达到', month: 1},{name : '傻逼', content: '你早干什么去了', month: 12},{name : '当生活一地鸡毛', content: '活成自己才是最重要的', month: 5},{name : 'Mactalk', content: '我们的工作并没有想象中那么辛苦', month: 8}]
    };
    var html = template('test',data);
    document.getElementById('content').innerHTML = html;
    </script>
    <!-- 
         template(id, data) 方法，会根据ID查找模板，用data的参数渲染，如果data是空的对象，会返回空的模板,如果定义了data变量，没有赋值，则返回的是渲染函数。
     -->
</body>
</html>