Juicer模板引擎使用笔记

Posted 2020-08-11

关于Juicer:Juicer 是一个高效、轻量的前端 (javascript) 模板引擎，使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。 除此之外，它还可以在 Node.js 环境中运行。Juicer中文文档地址：http://juicer.name/docs/docs_zh_cn.html

1.引入Juicer插件

<script type="text/javascript" src="juicer-min.js"></script>

 

2.Juicer有两个参数,tp1和data

tp1:定义好的模板页。比如，

<!-- juicer模板页-->
<script id="tp1" type="text/ng-template">
    {*each list as item,index}//index：可选参数，表示当前索引
    <tr>
        <td>${item.Heq_Id}</td>
        <td>${item.Heq_Name}</td>
        <td>${item.Heq_LoginName}</td>
        <td>${item.Heq_LoginPwd}</td>
        <td>${item.Heq_Frdb}</td>
        <td>${item.Heq_Email}</td>
        <td>${item.Heq_Zch}</td>
        <td>${item.Heq_Tel}</td>
        <td>${item.Heq_Address}</td>
        <td>${item.Heq_Qq}</td>
        <td>${item.Heq_Notice}</td>
        <td>
            <a href="#">
                <button class="btn btn-danger btn-xs" onclick="del(‘${item.Heq_Id}‘)">删除</button>
            </a>
            <a href="#">
                <button class="btn btn-info btn-xs" onclick="edit(‘${item.Heq_Id}‘)">编辑</button>
        </td>
        </a>
    </tr>
    {*/each}
</script>

 

data：需要传入模板页的数据。项目中是异步请求控制器方法得回一串json数据

loadData(); 
function loaddata(){
$.post(
        "/Headquarter/GetAllUserInfo", //请求控制器方法得到Json数据
        {
         
        },
        function (data) {
            var tp1 = document.getElementById(‘tp1‘).innerHTML;// 获取模板页的内容
            var html = juicer(userInfo, data);//使用模板引擎渲染json数据到模板userInfo,变量html接收
            showTp1.innerHTML = html;//输出
        });
}

这里的showTp1是html要输出地方的id。

附部分html部分代码

  <table class="table table-bordered table-hover">
                                <thead>
                                    <tr>

                                        <th>序号</th>
                                        <th>公司名称</th>
                                        <th>登录账号</th>
                                        <th>密码</th>
                                        <th>公司法人</th>
                                        <th>邮箱</th>
                                        <th>公司注册号</th>
                                        <th>联系电话</th>
                                        <th>公司地址</th>
                                        <th>公司QQ</th>
                                        <th>备注</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="showTp1"></tbody>//loadData的地方
                            </table>

效果图：