Art-template は、js を介して渡されたデータを HTML でレンダリングする ejs に似ています
が、art-template は<script></script>タグ内でレンダリングされます。
テンプレートをインポートする
//html文件中
<script id="J_goods_list" type="text/html">
</script>
たとえば、対応する js ファイル内のデータを取得し、そのデータを html に渡します。
js文件中
//请求得到的数据res.result，通过上面模板的id：J_goods_list传入
var res3 = template('J_goods_list',res.result);
//将渲染好的模板加到对应的地方.J_goods_list
$('.J_goods_list').append(res3);
レンダリング
上記の基本が完了したら、テンプレートをレンダリングできます。ここでは、ループごと、判定の場合、ループまたは判定を閉じる必要があるなど、参考用の基本的な文法をいくつか示します。
{
{each list value}} each需要闭合 {
{/each}}
{
{if value==1}} if需要闭合 {
{/if}}
<script id="J_goods_list" type="text/html">
//each循环，list是拿到的数据中的list，重新命名为value
{
{
each list value}}
//if判断
{
{
if value.type == 'list'}}
<div class="home-standard">
<div class="h-title">
//两个花括号{
{}}放置变量
<i></i><h3><a href="{
{value.url}}">{
{
value.title}}</a></h3>
</div>
{
{
if value.banner_list[0]}}
<div class="left-sidebar">
<a href="{
{value.banner_list[0].url}}" target="_blank"><img src="{
{value.banner_list[0].image}}" alt="{
{value.title}}"></a>
</div>
//if需要闭合
{
{
/if}}
<div class="layout-1">
<ul class="list">
//each 还是循环，这次是循环value里面的，相当于二次循环
{
{
each value.goods_list val}}
<li>
<div class="goods-img">
<a href="{
{val.url}}" target="_blank"><img src="{
{val.image}}" alt="{
{val.goods_name}}"></a>
</div>
<div class="goods-info">
<div class="goods-name"><a href="{
{val.url}}" class="line2" target="_blank">{
{
val.goods_name}}</a></div>
<div class="price">￥{
{
val.price}}</div>
{
{
if val.promotion.is_presell==0 && val.promotion.is_snap_up==0}}
<div class="add-cart J_cart_box" data-goods_id="{
{val.goods_spec_id}}"><i class="icon-cart"></i></div>
{
{
/if}}
<div class="sale-tip-label">
{
{
each val.promotion.labels v2}}
<span>{
{
v2}}</span>
{
{
/each}}
</div>
</div>
</li>
//each也需要闭合
{
{
/each}}
</ul>
</div>
</div>
{
{
/if}}
{
{
/each}}
</script>