laytpl js模板引擎

网站编辑 :2020-03-14 21:32 / 海口网站建设 / 技术分享
引入文件
<script src="../js/laytpl.js"></script>
//第一步:编写模版。你可以使用一个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;
});
【我们与众不同】凭借对设计的热爱和执着,互联网营销趋势的敏锐洞察和深刻理解,与众多同行不同的是,我们更注重与客户互促共生,价值同在。
本文所有内容若需转载请联系我们。

文章分类