artTemplate的使用总结

原生语法

使用原生语法,需要导入template-native.js文件。

在HTML中定义模板,注意模板的位置,不要放到被渲染区域,防止模板丢失。



<script id="main_panel_big_sale_template" type="text/html">
    <% for (var i = 0; i < products.length; i ++) { %>
        <% var product =products[i]; %>
        <% if (i < 3) { %>
            <li>
                <img src="<%=getImageUrl(product.pictographicIconList[0].image.url)%>" data-imgname="<%=product.pictographicIconList[0].image.url%>">
                <div class="flash-time-box">
                    <span>2015-02-09</span>
                </div>
                <strong class="marque"><%=product.name%></strong>
                <strong class="libelle"><%=product.description%></strong>
                <div class="no-picto">
                    <span class="prod-tip">
                        <img src="img/grey.png" data-original="img/icon.png">
                    </span>
                    <span class="italic black">
                        <span class="cny-curr">¥&nbsp;<%=formatPrice(product.promoPrice,‘integer‘)%></span><span class="decimal"><%=formatPrice(product.promoPrice,‘decimal‘)%></span>
                    </span>
                </div>
            </li>
        <% } %>
    <% } %>
</script>


template(id, data)

渲染数据到页面

$(‘#main_panel‘).html(template(‘main_panel_big_sale_template‘, data));

简洁语法

使用简洁语法,导入template.js文件。



<script id="main_panel_big_sale_template" type="text/html">
   {{each products as product i}}
   {{if i < 3}}
       <li>
           <img src="{{product.pictographicIconList[0].image.url | getImageUrl}}" data-imgname="{{product.pictographicIconList[0].image.url}}">
           <div class="flash-time-box">
               <span>2015-02-09</span>
           </div>
           <strong class="marque">{{product.name}}</strong>
           <strong class="libelle">{{product.description}}</strong>
           <div class="no-picto">
                <span class="prod-tip">
                    <img src="img/grey.png" data-original="img/icon.png">
                </span>
                <span class="italic black">
                    <span class="cny-curr">¥&nbsp;{{product.price.value | formatPrice: ‘integer‘}}</span><span class="decimal">{{product.price.value | formatPrice: ‘decimal‘}}</span>
                </span>
           </div>
       </li>
   {{/if}}
   {{/each}}
</script>


渲染数据到页面,和原生语法一样

$(‘#main_panel‘).html(template(‘main_panel_big_sale_template‘, data));

调用外部函数

template.helper

上面的例子中,都调用了formatPrice函数,要调用此函数需要通过helper方法注册:



template.helper(‘formatPrice‘, function(price, type) {
    if(price){
        var arrayPrice = price.toString().split(".");
        if(type == ‘integer‘) {
            return arrayPrice[0]?arrayPrice[0]:"0";
        }else if (type ==‘decimal‘) {
            return arrayPrice[1]?arrayPrice[1].length == 1?"."+arrayPrice[1]+"0":"."+arrayPrice[1]:".00";
        }
    }else{
        if(type == ‘integer‘) {
            return "0";
        }else if (type ==‘decimal‘) {
            return ".00";
        }
    }
});


原生语法与简洁语法比较

语法类型 调用外部函数
原生 <%=formatPrice(product.promoPrice,‘integer‘)%>
简洁 <code>{{product.price.value | formatPrice: ‘integer‘}}</code>

简洁语法的传参有点奇怪,原生语法就很好理解,如果要传递三个参数,简洁语法该怎么写呢?

简洁语法的循环如果要做更多逻辑,也实现不了

推荐使用原生语法

template.compile

模板可以直接写在JS中,再编译渲染。



var source = ‘<ul>‘
+    ‘<% for (var i = 0; i < list.length; i ++) { %>‘
+        ‘<li>索引 <%= i + 1 %> :<%= list[i] %></li>‘
+    ‘<% } %>‘
+ ‘</ul>‘;

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


这种方式的的缺点是,模板通过字符串拼接,不好维护,适合简单模板。

转自:https://www.jianshu.com/p/483fa7f6f55b

原文地址:https://www.cnblogs.com/hahajava/p/9080423.html

时间: 2024-11-02 04:21:52

artTemplate的使用总结的相关文章

artTemplate模板引擎学习实战

在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javascript引擎.而javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML. 如果有不了解的朋友,可以前往这两篇文章: 淘宝购物车页面 PC端和移动端实战 淘宝购物车页面 智能搜索框Ajax异步加载数据 源码地址: GitHub:Uncle-Keith 回

artTemplate入门

artTemplate模板引擎,分为简洁语法和原生语法,前者利于阅读,后者功能强大,体现在处理复杂数据处理上,我们要说的仅仅是简洁语法,话不多说,开始正题. 看一个简单的例子 <html lang="en"> <head> <meta charset="UTF-8"> <title>artTemplate练习</title> <script src='../js/jquery-1.9.1.min.js

artTemplate模板引擎的源码拜读

最初接触的模板引擎还是基于node的ejs,当时觉得很神奇原来还可以这么玩,后来随着学习的深入,使用过jade,doT等,当然还有一些比较火的诸如juicer.underscore还没有深入接触,直到今年上半年由于项目需要就想着要不试试腾讯的artTemplate,感觉牛逼也吹的挺响的.开始了解后,觉得它比我之前使用过的jade.doT都好用,调试神马的也方便很多,采用预编译的方式也让性能非常优越. 其实看了源码后简单的总结出来就是这么一句话:就是先获取html中对应的id下得innerHTML

js模板引擎--artTemplate

js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址),貌似最近耳边听到得最多的模板引擎也就是artTemplate了,所以就花个时间来研究下吧... artTemplate是新一代的javascript模板引擎,若采用拥有V8引擎的chrome浏览器进行测试,其渲染性能甚至能达到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上

JS模板引擎 :ArtTemplate

1.为什么需要用到模板引擎 我们在做前端开发的时候,有时候经常需要根据后端返回的json数据,然后来生成html,再显示到页面中去. 例如这样子: var data = [ {text: "测试一"}, {text: "测试二"}, {text: "测试三"}, {text: "测试四"} ]; function generateList(data) { var listHtml = ""; listHtm

artTemplate模板的使用

官方开源地址:https://github.com/aui/artTemplate 补充一: 默认对 html 进行转义输出请使用:{{=$value}},就是前面加上=号,不然比如图片地址,会显示<img src=...>而不是显示图片了,也可以关闭默认的转义功能template.defaults.escape = false 补充二: 可以使用简单方式来循环,更复杂的判断嵌套都可以,要比ToDo强 比如: <script id="message-template"

art-template视图引擎express

const exp = require('express'), template = require('art-template'), app = exp() // 禁用模板缓存,修改模板立即生效// 在正式产品中不要禁用,仅在开发时可以使用 template.config('cache', false) // 指定.html使用的解析引擎 app.engine('.html', template.__express) // 指定使用html视图引擎 app.set('view engine',

在artTemplate的标签中使用外部函数的方法

第一步,声明函数,并将函数作为data对象的属性.例如: var resArray = new Array(); function beforeRender(data) { //addToArray为想在template的标签中执行的函数 var addToArray = function(id, rec){ resArray[id] = rec; }; data.addToArray = addToArray; } function submit(){ $.ajax({ type : "POS

artTemplate模板引擎源码拜读

最初接触的模板引擎还是基于node的ejs,当时觉得很神奇原来还可以这么玩,后来随着学习的深入,使用过jade,doT等,当然还有一些比较火的诸如juicer.underscore还没有深入接触,直到今年上半年由于项目需要就想着要不试试腾讯的artTemplate,感觉牛逼也吹的挺响的.开始了解后,觉得它比我之前使用过的jade.doT都好用,调试神马的也方便很多,采用预编译的方式也让性能非常优越. 其实看了源码后简单的总结出来就是这么一句话:就是先获取html中对应的id下得innerHTML

JavaScript模板引擎artTemplate.js——结语

再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是由此自己写了一份简单的artTemplate.js的总结. 由于这次是工作期间匆忙中写的,所以有些不完善的地方,后续会继续补充的.