zoukankan      html  css  js  c++  java
  • js模板引擎-juicer

    <script id="listtemp" type="text/template">
        {@if !!data.length}
            <div>总共${total_count}个数</div>
            <div>
                {@each data as obj,index}
                    <div>
                        <a href="http://www.baidu.com/s?wd=${obj.user_id}">${obj.user_name}</a>
                        <div>${obj.comment_content}</div>
                        {@if obj.average_grade > 3}
                            <div>${obj.average_grade}</div>
                        {@/if}
                    </div>
                {@/each}
            </div>
        {@else}
            <div>暂无数据</div>
        {@/if}
    </script>
    <script type="text/javascript">
        var data ={
            total_count:"175",
            data: [{"user_name":"飞天盗","average_grade":"2.0","comment_id":"97180","comment_grade":"1","comment_content":"很好","user_id":"8488867","reply_content":"","up_num":"1","user_avatar":""},{"user_name":"大丰董先生","average_grade":"5.0","comment_id":"97049","comment_grade":"1","comment_content":"质量及做工都非常好,很满意!","user_id":"39541412","reply_content":"","up_num":"1","user_avatar":""}]
            };
        var listhtml = document.getElementById('listtemp').innerHTML;
        var html = juicer(listhtml,data);
        document.getElementById('content').innerHTML = html;
    </script>
    //数据源
    var data ={total_count:"175",data: [{"user_name":"飞天盗","average_grade":"2.0","comment_id":"97180","comment_grade":"1","comment_content":"很好","user_id":"8488867","reply_content":"","up_num":"1","user_avatar":""},{"user_name":"大丰董先生","average_grade":"5.0","comment_id":"97049","comment_grade":"1","comment_content":"质量及做工都非常好,很满意!","user_id":"39541412","reply_content":"","up_num":"1","user_avatar":""}]};
  • 相关阅读:
    Web crawler study(1)
    SNMP
    Locked the resolv.conf via command chattr
    HTML 父窗口打开子窗口,并从子窗口返回值
    混合语言学习(一)
    Auto Scale TextView Text to Fit within Bounds
    Android SeekBar size
    Android设置全局字体
    PopupMenu使用,PopupMenu背景的设置
    Android-屏幕适配全攻略
  • 原文地址:https://www.cnblogs.com/ahu666/p/6373922.html
Copyright © 2011-2022 走看看