art-template渲染基本语法

art-template有点类似ejs,将通过js传过来的的数据,在html里面渲染,
但是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,if判断,循环或判断都需要闭合

{ {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>

猜你喜欢

转载自blog.csdn.net/LiuPangZi6/article/details/103019639
今日推荐