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":""}]};
原文地址:https://www.cnblogs.com/ahu666/p/6373922.html