<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 模板引擎文檔 - 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 - 用心與你溝通

      亚洲图色