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":""}]};
  • 相关阅读:
    可视化svg深入理解viewport、viewbox、preserveaspectradio
    async generator promise异步方案实际运用
    JavaScript中面相对象OOP
    css3:神秘的弹性盒子flexbox
    JavaScript:我总结的数组API
    CSS3:过渡大全
    CSS3奇特的渐变示例
    缓存:前端页面缓存、服务器缓存(依赖SQL)MVC3
    nohup
    video和audio
  • 原文地址:https://www.cnblogs.com/ahu666/p/6373922.html
Copyright © 2011-2022 走看看