So verwenden Sie die Laui-Vorlagen-Engine

Wenn Sie mehr über Laui erfahren möchten, klicken Sie auf: Laui-Tutorial

Laytpl ist eine JavaScript-Vorlagen-Engine, die eine hervorragende Leistung beim Parsen von Zeichen bietet, ihre Mängel jedoch im Debuggen von Ausnahmen liegen. Da die traditionelle Front-End-Template-Engine an Popularität verloren hat, wird Laytpl möglicherweise in Zukunft neu geschrieben. Die aktuelle Richtung ist noch nicht festgelegt und es wird erwartet, dass sie implementiert wird, sobald Laui relativ stabil ist.

Schnelle Verwendung

Anders als beim allgemeinen Zeichenspleißen kann die Vorlage von Laytpl von den Daten getrennt und die logische Verarbeitung im zentralisiert werden Ansichtsebene zur Verbesserung der Code-Wartbarkeit, insbesondere beim Rendern einer großen Anzahl von Vorlagen.

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(''))
      });

Sie können die Vorlage auch auf der Seite oder an einer anderen Stelle speichern:

//第一步：编写模版。你可以使用一个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 || &#39;&#39; }}</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(&#39;view&#39;);
laytpl(getTpl).render(data, function(html){view.innerHTML = html;});

Vorlagensyntax

SyntaxBeschreibungBeispiel< /td>{{ d.field }}Eine Normale ausgeben Feld, kein Escape-HTML

<div>{{ d.content }}</div>

< /td>{{ = d.field }}Ausgabe a Gewöhnliche Felder und Escape-HTML{ { # JavaScript-Ausdruck}}语法说明示例{{ d.field }}输出一个普通字段，不转义html

<h2>{{= d.title }}</h2>

{{= d.field }}输出一个普通字段，并转义html

{{#
var fn = function(){return '2017-08-18';
};
}}
{{#  if(true){ }}
开始日期：{{ fn() }}
{{#  } 
else { }}
已截止{{#  } }}

{{# JavaScript表达式 }}JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。

注意：如果你是想输出一个函数，正确的写法是：{{ fn() }}，而不是：{{# fn() }}

<div> {{! 这里面的模板不会被解析  !}}</div>

{{! template !}}对一段指定的模板区域进行过滤，即不解析该区域的模板。注：layui 2.1.6 新增

laytpl.config({
  open: &#39;<%&#39;,
  close: &#39;%>&#39;
});
//分割符将必须采用上述定义的
laytpl([
  &#39;<%# var type = "公"; %>&#39; //JS 表达式,
  &#39;<% d.name %>是一位<% type %>猿。&#39;
  ].join(&#39;&#39;)).render({
  name: &#39;贤心&#39;
}, function(string){
  console.log(string); //贤心是一位公猿
});

Hinweis: Wenn Sie eine Funktion ausgeben möchten, ist die richtige Schreibweise: {{ fn() }}, nicht: {{# fn() }}

rrreee {{! top" style="word-break: break-all; border-color: rgb(221, 221, 221);" width="345">Filtert einen angegebenen Vorlagenbereich, d. h. die Vorlage in diesem Bereich wird nicht analysiert . Hinweis: neu in Laui 2.1.6 rrreee Trennzeichen

Wenn die Vorlage standardmäßig {{ }} ist, Trennzeichen Wenn Es besteht ein Konflikt mit Ihren anderen Vorlagen (in der Regel serverseitige Vorlagen). Sie können das Trennzeichen auch neu definieren:

rrreeeSchlussfolgerung

laytpl Es wird in vielen Modulen von Laui verwendet, z. B. Layim, Tabelle usw. Obwohl die traditionelle Front-End-Template-Engine weniger beliebt ist, kann Laytpl immer noch eine gewisse Rolle spielen, also probieren Sie es aus.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Laui-Vorlagen-Engine. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!