Comment utiliser le moteur de modèles Layui

Si vous souhaitez en savoir plus sur layui, vous pouvez cliquer sur : tutoriel layui

Laytpl est un moteur de modèles JavScript qui offre d'excellentes performances en matière d'analyse de caractères, mais ses défauts résident dans le débogage des exceptions. Étant donné que le moteur de modèle frontal traditionnel est devenu moins populaire, laytpl pourrait être réécrit à l'avenir. La direction actuelle n'a pas encore été décidée et il devrait être implémenté une fois que layui sera relativement stable.

Utilisation rapide

Différent de l'épissage général des caractères, le modèle de laytpl peut être séparé des données et le traitement logique peut être centralisé dans le Couche de visualisation pour améliorer la maintenabilité du code, en particulier lors du rendu d'un grand nombre de modèles.

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

Vous pouvez également stocker le modèle sur la page ou ailleurs :

//第一步：编写模版。你可以使用一个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;});

Syntaxe du modèle