Juicer模板引擎使用笔记

学习APP开发，接单挣钱！

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

1.引入Juicer插件

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

2.初始化

$(function () {

    //初始化模板引擎

    juicer.set({ 'tag::operationOpen': '{*' });
　　//注册自定义函数

    juicer.register('dateForm', ChangeDateFormat);

    juicer.register('xk', showXkBtn);

    juicer.register('ry', showRyBtn);

    juicer.register('jzxj', showJzxjBtn);

    juicer.register('notNull', notNull);

    loadInfo(jtParm);

});

3.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|notNull}</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 userInfo = $('#tp1').html();// 获取模板页的内容

            var html = juicer(userInfo, data);//使用模板引擎渲染json数据到模板userInfo,变量html接收

           $('#showTp1').html(html);//输出

        });
}

附部分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>

效果图：

  

请赞赏