zoukankan      html  css  js  c++  java
  • js模板引擎之artTemplate

    http://www.cnblogs.com/52fhy/p/5393673.html

    artTemplate 不支持requre.js,悲剧啊,只能用juicer啊

    这个还是比较有名的。

    简介:

    artTemplate-3.0 新一代 javascript 模板引擎
    https://github.com/aui/artTemplate
    
    template.js (简洁语法版, 2.7kb)
    
    支持if等语句{{ if admin }}   {{/if}}
    
    template(id, data)
    根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
    如果没有 data 参数,那么将返回一渲染函数。
    
    
    性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)
    支持运行时调试,可精确定位异常模板所在语句(演示)
    对 NodeJS Express 友好支持
    安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
    支持include语句
    可在浏览器端实现按路径加载模板(详情)
    支持预编译,可将模板转换成为非常精简的 js 文件
    模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
    支持所有流行的浏览器

    artTemplate区分简洁语法版原生语法版。这里先演示简洁语法版

    使用前同样先引入artTemplate.js:

    <script src="artTemplate/template.js"></script>

    模板

    <!--模板-->
    <script id="js-tmp" type="text/html">
        <div class="weui_media_box weui_media_text">
            <a href="{{ url }}" class="" target="_blank">
                <h4 class="weui_media_title">{{ title }}</h4>
            </a>
            <p class="weui_media_desc">{{ desc }}</p>
        </div>
    </script>
    <!--/模板-->

    注意这里模板与前面的示例不一样了,直接使用一个type="text/html"的script标签存放模板。artTemplate不支持textarea标签。

    模板里变量使用{{ 变量 }}占位。

    js代码

    /本例不再需要手动取模板内容
    //var htmlTemp = $("textarea.js-tmp").val();
    
    $.each(data, function(i,el) {
        htmlList += template("js-tmp", el); //注意第一个参数是id
    });

    artTemplate使用基于document.getElementById(id)的方式直接获取模板内容。这一点与其它模板有点不同,需要注意。

    下面再看看artTemplate原生语法版
    需要引入替换成:

    <script src="artTemplate/template-native.js"></script>

    模板

    <!--模板-->
    <script id="js-tmp" type="text/html">
        <div class="weui_media_box weui_media_text">
            <a href="<%= url %>" class="" target="_blank">
                <h4 class="weui_media_title"><%= title %></h4>
            </a>
            <p class="weui_media_desc"><%= desc %></p>
        </div>
    </script>
    <!--/模板-->

    原生语法版的artTemplate模板也不一样,使用<%= 变量 %>的方式表示变量。

    js代码
    无需改动,和上面简洁语法版是一样的。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>basic-demo</title>
    <script src="../../lib/template.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>
    
    
    var data = {
    	title: '基本例子',
    	isAdmin: true,
    	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    laydate 监听日期切换
    done
    Could not find result map java.util.HashMap
    toFixed
    js追加元素
    input只能输入数字或两位小数
    JSTree[树形控件]
    JSp获取到当前用户的全部session
    layui select change
    大型网站技术架构读后感
  • 原文地址:https://www.cnblogs.com/as3lib/p/6712938.html
Copyright © 2011-2022 走看看