搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

模板引擎文档 - layui.laytpl

laytpl 是 JavScript 模板引擎,在字符解析上有着比较出色的表现,欠缺之处在于异常调试上。由于传统意义的前端模板引擎已经变得不再流行,所以 laytpl 后续可能会进行重写,目前方向暂时还没有想好,预计会在layui比较稳定后开始实施。

模块加载名称:laytpl,在线调试:http://www.layui.com/demo/laytpl.html

快速使用

laytpl 模板可与数据共存,这意味着可直接在模板中处理逻辑。

</>code

  1. layui.use('laytpl', function(){
  2. var laytpl = layui.laytpl;
  3. //直接解析字符
  4. laytpl('{{ d.name }}是一位公猿').render({
  5. name: '贤心'
  6. }, function(string){
  7. console.log(string); //贤心是一位公猿
  8. });
  9. //你也可以采用下述同步写法,将 render 方法的回调函数剔除,可直接返回渲染好的字符
  10. var string = laytpl('{{ d.name }}是一位公猿').render({
  11. name: '贤心'
  12. });
  13. console.log(string); //贤心是一位公猿
  14. //如果模板较大,你也可以采用数据的写法,这样会比较直观一些
  15. laytpl([
  16. '{{ d.name }}是一位公猿'
  17. ,'其它字符 {{ d.content }} 其它字符'
  18. ].join(''))
  19. });

你也可以将模板存储在页面或其它任意位置:

</>code

  1. //第一步:编写模版。你可以使用一个script标签存放模板,如:
  2. <script id="demo" type="text/html">
  3. <h3>{{ d.title }}</h3>
  4. <ul>
  5. {{# layui.each(d.list, function(index, item){ }}
  6. <li>
  7. <span>{{ item.modname }}</span>
  8. <span>{{ item.alias }}:</span>
  9. <span>{{ item.site || '' }}</span>
  10. </li>
  11. {{# }); }}
  12. {{# if(d.list.length === 0){ }}
  13. 无数据
  14. {{# } }}
  15. </ul>
  16. </script>
  17. //第二步:建立视图。用于呈现渲染结果。
  18. <div id="view"></div>
  19. //第三步:渲染模版
  20. var data = { //数据
  21. "title":"Layui常用模块"
  22. ,"list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
  23. }
  24. var getTpl = demo.innerHTML
  25. ,view = document.getElementById('view');
  26. laytpl(getTpl).render(data, function(html){
  27. view.innerHTML = html;
  28. });
模版语法
语法 说明 示例
{{ d.field }} 输出一个普通字段,不转义html

</>code

  1. <div>{{ d.content }}</div>
{{= d.field }} 输出一个普通字段,并转义html

</>code

  1. <h2>{{= d.title }}</h2>
{{# JavaScript表达式 }} JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。

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

</>code

  1. {{#
  2. var fn = function(){
  3. return '2017-08-18';
  4. };
  5. }}
  6. {{# if(true){ }}
  7. 开始日期:{{ fn() }}
  8. {{# } else { }}
  9. 已截止
  10. {{# } }}
{{! template !}} 对一段指定的模板区域进行过滤,即不解析该区域的模板。注:layui 2.1.6 新增

</>code

  1. <div> {{! 这里面的模板不会被解析 !}}</div>
分隔符

如果模版默认的 {{ }} 分隔符与你的其它模板(一般是服务端模板)存在冲突,你也可以重新定义分隔符:

</>code

  1. laytpl.config({
  2. open: '<%',
  3. close: '%>'
  4. });
  5. //分割符将必须采用上述定义的
  6. laytpl([
  7. '<%# var type = "公"; %>' //JS 表达式
  8. ,'<% d.name %>是一位<% type %>猿。'
  9. ].join('')).render({
  10. name: '贤心'
  11. }, function(string){
  12. console.log(string); //贤心是一位公猿
  13. });
结语

laytpl 应用在 layui 的很多模块中,如:layim、table 等。尽管传统意义的前端模板引擎已经变得不再流行,但 laytpl 仍然可以发挥一定作用,不妨尝试一下吧。

layui - 在每一个细节中,用心与你沟通