artTemplate的使用总结

原生语法

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

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

template(id, data)

渲染数据到页面

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

简洁语法

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

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

$('#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')%>
简洁	{{product.price.value | formatPrice: 'integer'}}

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

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

推荐使用原生语法

template.compile

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

var source = '
'
+    '<% for (var i = 0; i < list.length; i ++) { %>'
+        '
索引 <%= i + 1 %> ：<%= list[i] %>
'
+    '<% } %>'
+ '
';

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

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

arttemplate嵌套循环，包含调用外部函数，直接看例子：

{{each data.results}}
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ana_btn3">
   <div class="thumbnail" style="border: 0 solid white">
      {{if $value.thumbnail == null}}
      <img src="" alt="Responsive image" style="width: 99%">
      {{else}}
      <img src="{{}}" alt="Responsive image" style="width: 99%">
      {{/if}}
      <div class="caption">
         <h3 style="color: #1b6d85; text-align: center">{{$value.title}}h3>
         {{if $value.snippet == null}}
         <p class="" style="color: #777777;height: 40px;overflow: hidden;text-overflow: ellipsis;text-align: center">无摘要p>
         {{else}}
         <p class="" style="color: #777777;height: 40px;overflow: hidden;text-overflow: ellipsis;text-align: center">{{$value.snippet}}p>
         {{/if}}

         {{each $value.tags as tag i}}
               {{if tag === option.panelLeftTree.sites[0].nodes[0].zhName}}
                  <p style="margin-top: 20px;text-align: center"><a  class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看详细信息a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.webmapPortal + $value.id}}" target="_blank"  class="btn btn-default" role="button" id="mapOpen" >在地图中查看a>p>
               {{/if}}
               {{if tag === option.panelLeftTree.sites[0].nodes[1].zhName}}
                  <p style="margin-top: 20px;text-align: center"><a  class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看详细信息a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.sencePortal + $value.id}}" target="_blank"  class="btn btn-default" role="button" id="mapOpen" >在地图中查看a>p>
               {{/if}}
               {{if tag === option.panelLeftTree.sites[0].nodes[2].zhName}}
                  <p style="margin-top: 20px;text-align: center"><a  class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看详细信息a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.chartVisual + $value.id}}" target="_blank"  class="btn btn-default" role="button" id="mapOpen" >在地图中查看a>p>
               {{/if}}
               {{if tag === option.panelLeftTree.sites[0].nodes[3].zhName}}
                  <p style="margin-top: 20px;text-align: center"><a  class="btn btn-primary" role="button" id="showDetails" οnclick="detailsShow()">查看详细信息a><a style="margin-left: 10px;color:#5AC8FA;cursor:pointer" href="{{option.gangedVisual + $value.id}}" target="_blank"  class="btn btn-default" role="button" id="mapOpen" >在地图中查看a>p>
               {{/if}}
         {{/each}}

         <p style="color: #dddddd; margin-top: 20px;text-align: center" id="fomateTime">{{formatDate($value.modified)}}p>
      div>
   div>
div>
{{/each}}

var irender = template.compile(info);
 var ihtmlItem = irender(infoData);

$("#testView").html(ihtmlItem);