Juicer模板引擎使用筆記

關於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.初始化

$(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>

效果圖：