layui 模板引擎用法小结

<script id="homeworkResource" type="text/html">{{#  if(d.resources.length != 0){ }}<div class="v1-homework-resourcebox"><div><span class="span"></span>资源</div><div>{{# layui.each(d.resources, function(idx, items){ }}<div class="v1-homework-resource" data-role="resource" data-resid="{{items.resid}}" data-hwid="{{d.hwid}}">{{#  if( items.extension == 'mp3'){ }}<div class="hwresource-img hwvideo"></div>{{#  }else{ }}<div class="hwresource-img hw{{items.extension}}"></div>{{#  } }}<div>{{items.title}}</div><div></div></div>{{# }); }}</div></div>{{#  } }}
</script>

条件判断
{{# if(d.resources.length != 0){ }}
{{# } }}

多重条件判断
{{# if(items.type == '01'){ }}
{{# }else if(items.type == '02' && items.questtype == '03'){ }}
{{# }else{ }}
{{# } }}

for循环
{{# layui.each(d.questions, function(idx, items){ }}
{{# }); }}

字符串截取
{{ (d.endtime).substring(5,7) }}

根据字段来显示样式如hwppt、hwpdf等等
<div class="hwresource-img hw{{items.extension}}"></div>

函数 72秒转1分12秒
{{ Math.floor(items.totalPlayTime/60)+'分'+ items.totalPlayTime%60 +'秒' }}

多个div盒子放循环模板的内容

<div class="v1-homeworkdetail"><div class="v1-homework-title" data-role="homeworkTitle"></div><!-- 作业名称 --><hr><div data-role="homeworkReviews"></div><!-- 作业点评 --><div data-role="homeworkInfo"></div><!-- 作业描述 --><div data-role="homeworkAudio"></div><!-- 语音 --><div data-role="homeworkResource"></div><!-- 资源 --><div data-role="homeworkVideo"></div><!-- 微课 --><div data-role="homeworkTest"></div><!-- 试题 --><div class="v1-homework-graybar"></div><div data-role="homeworkSubmit"></div><!-- 提交作业文件 -->
</div>

模板数据

packageTemplate('[data-role="homeworkTitle"]',stutaskData,'#homeworkTitle');//作业名称
packageTemplate('[data-role="homeworkReviews"]',stutaskData,'#homeworkReviews');//作业点评
packageTemplate('[data-role="homeworkInfo"]',stutaskData,'#homeworkInfo');//作业描述
packageTemplate('[data-role="homeworkAudio"]',stutaskData,'#homeworkAudio');//作业语音
packageTemplate('[data-role="homeworkResource"]',stutaskData,'#homeworkResource');//作业资源
packageTemplate('[data-role="homeworkVideo"]',stutaskData,'#homeworkVideo');//作业微课
packageTemplate('[data-role="homeworkTest"]',stutaskData,'#homeworkTest');//作业试题
packageTemplate('[data-role="homeworkSubmit"]',stutaskData,'#homeworkSubmit');//作业文件
packageTemplate('[data-role="homeworkTestdetail"]',stutaskData,'#homeworkTestdetail');//作业试题详情

封装模板

function packageTemplate(selector,data,container){var htmls = $(container).html();laytpl(htmls).render(data, function(html) {$(selector).html(html);});
}

layui 模板引擎用法小结相关推荐

twig模板引擎使用php,Twig模板引擎用法入门教程_PHP
本文实例讲述了Twig模板引擎用法.分享给大家供大家参考,具体如下: 介绍 Twig是一个灵活.高效并且安全的PHP模板引擎. 如果你使用过Smarty.Django或者Jinja这类基于文本的模板引 ...
twig php,Twig模板引擎用法入门教程
本文实例讲述了Twig模板引擎用法.分享给大家供大家参考,具体如下: 介绍 Twig是一个灵活.高效并且安全的PHP模板引擎. 如果你使用过Smarty.Django或者Jinja这类基于文本的模板引 ...
LayUI模板引擎渲染数据
前端模板引擎介绍接上节Spring boot项目开发实战--(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及pyt ...
html 开发中遇到的问题，ajax异步传输，layui模板引擎并重新渲染
1.实际中自己遇到的,比较杂乱绑定点击事件绑定enter事件 html A页面跳转到B页面,并传参.取值 layui模板引擎,渲染样式 Ajax 异步传输数据,动态更新内容绑定点击事件 < ...
怎样存储layui模板引擎后台返回的数据，在需要的时候获取
在项目中遇到一个情况,需要动态获取后台的返回数据,并在前台渲染出来,并且能够根据所点击的不同标签,随时获取对应数据.在网上看到两种方法,一种是写一个动态创建div模板的函数,并将返回值作为参数在其中展 ...
twig模板引擎使用php,Twig模板引擎用法入门教程
本文实例讲述了Twig模板引擎用法.分享给大家供大家参考,具体如下: 介绍 Twig是一个灵活.高效并且安全的PHP模板引擎. 如果你使用过Smarty.Django或者Jinja这类基于文本的模板引 ...
layui模板引擎做动态增加和减少表单
效果显示目录结构代码 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
Thymeleaf 模板引擎用法
学习.改良.极致博客园首页新随笔联系管理订阅随笔- 31 文章- 0 评论- 50 Thymeleaf 常用属性文章主目录 th:action th:each th:field ...
layui模板引擎laytpl判断为null或为空
<script type="text/html" id="stu_nameTpl">{{# if(d.stu_name==null || d.stu ...
layui模板引擎的使用
1,自定义数据 //发送请求$.ajax({type: "GET", dataType:'json',url: "http://merchant.shys-suda.co ...

layui 模板引擎用法小结

layui 模板引擎用法小结相关推荐

最新文章

热门文章