模板引擎文檔 - layui.laytpl

                    laytpl 是 JavScript 模板引擎,在字符解析上有著比較出色的表現,欠缺之處在于異常調試上。由于傳統意義的前端模板引擎已經變得不再流行,所以 laytpl 后續可能會進行重寫,目前方向暫時還沒有想好,預計會在layui比較穩定后開始實施。

                    模塊加載名稱:laytpl,在線調試:http://www.fk434.com/demo/laytpl.html

                    快速使用

                    與一般的字符拼接不同的是,laytpl 的模板可與數據分離,集中把邏輯處理放在 View 層,提升代碼可維護性,尤其是針對大量模板渲染的情況。

                    layui.use('laytpl', function(){
                      var laytpl = layui.laytpl;
                      
                      //直接解析字符
                      laytpl('{{ d.name }}是一位公猿').render({
                        name: '賢心'
                      }, function(string){
                        console.log(string); //賢心是一位公猿
                      });
                      
                      //你也可以采用下述同步寫法,將 render 方法的回調函數剔除,可直接返回渲染好的字符
                      var string =  laytpl('{{ d.name }}是一位公猿').render({
                        name: '賢心'
                      });
                      console.log(string);  //賢心是一位公猿
                      
                      //如果模板較大,你也可以采用數據的寫法,這樣會比較直觀一些
                      laytpl([
                        '{{ d.name }}是一位公猿'
                        ,'其它字符 {{ d.content }}  其它字符'
                      ].join(''))
                    }); 
                          

                    你也可以將模板存儲在頁面或其它任意位置:

                    //第一步:編寫模版。你可以使用一個script標簽存放模板,如:
                    <script id="demo" type="text/html">
                      <h3>{{ d.title }}</h3>
                      <ul>
                      {{#  layui.each(d.list, function(index, item){ }}
                        <li>
                          <span>{{ item.modname }}</span>
                          <span>{{ item.alias }}:</span>
                          <span>{{ item.site || '' }}</span>
                        </li>
                      {{#  }); }}
                      {{#  if(d.list.length === 0){ }}
                        無數據
                      {{#  } }} 
                      </ul>
                    </script>
                     
                    //第二步:建立視圖。用于呈現渲染結果。
                    <div id="view"></div>
                     
                    //第三步:渲染模版
                    var data = { //數據
                      "title":"Layui常用模塊"
                      ,"list":[{"modname":"彈層","alias":"layer","site":"layer.layui.com"},{"modname":"表單","alias":"form"}]
                    }
                    var getTpl = demo.innerHTML
                    ,view = document.getElementById('view');
                    laytpl(getTpl).render(data, function(html){
                      view.innerHTML = html;
                    });
                          
                    模版語法
                    語法 說明 示例
                    {{ d.field }} 輸出一個普通字段,不轉義html
                    <div>{{ d.content }}</div>
                                  
                    {{= d.field }} 輸出一個普通字段,并轉義html
                    <h2>{{= d.title }}</h2>
                                  
                    {{# JavaScript表達式 }} JS 語句。一般用于邏輯處理。用分隔符加 # 號開頭。

                    注意:如果你是想輸出一個函數,正確的寫法是:{{ fn() }},而不是:{{# fn() }}
                    {{#  
                      var fn = function(){
                        return '2017-08-18';
                      }; 
                    }}
                     
                    {{#  if(true){ }}
                      開始日期:{{ fn() }}
                    {{#  } else { }}
                      已截止
                    {{#  } }}           
                                  
                    {{! template !}} 對一段指定的模板區域進行過濾,即不解析該區域的模板。注:layui 2.1.6 新增
                    <div> {{! 這里面的模板不會被解析  !}}</div>
                                  
                    分隔符

                    如果模版默認的 {{ }} 分隔符與你的其它模板(一般是服務端模板)存在沖突,你也可以重新定義分隔符:

                    laytpl.config({
                      open: '<%',
                      close: '%>'
                    });
                     
                    //分割符將必須采用上述定義的
                    laytpl([
                      '<%# var type = "公"; %>' //JS 表達式
                      ,'<% d.name %>是一位<% type %>猿。'
                    ].join('')).render({
                      name: '賢心'
                    }, function(string){
                      console.log(string); //賢心是一位公猿
                    });   
                          
                    結語

                    laytpl 應用在 layui 的很多模塊中,如:layim、table 等。盡管傳統意義的前端模板引擎已經變得不再流行,但 laytpl 仍然可以發揮一定作用,不妨嘗試一下吧。

                    layui - 用心與你溝通

                    亚洲图色