浅谈layui使用模板引擎动态渲染元素要注意的问题


Posted in Javascript onSeptember 14, 2019

摸索这个模板引擎碰到的问题,分享一下

本人在实现使用laytpl实现动态渲染菜单,来减少静态代码时候碰到了,元素是成功渲染出来,但是折叠动画效果和点击事件都失效了,然后仔细看了一下官方文档

官方文档原话:跟表单元素一样,很多时候你的页面元素可能是动态生成的,这时element的相关功能将不会对其有效,你必须手工执行 element.init(type, filter)方法即可。注意:2.1.6 开始,可以用 element.render(type, filter);

意思是我们动态渲染页面的时候,渲染完后一定要执行element.init()进行重新渲染,这样动画效果和事件才能正常运行

以下是我实现layui模板引擎实现动态菜单源码

var data = {
    menu: [{
      parentTitle: '权限列表',
      icon: 'layui-icon-auz',
      expand: 'layui-nav-itemed', //是否默认展开
      child: [{
        title: '管理员列表',
        href: "{{route('admin.list')}}"
      }, {
        title: '角色列表',
        href: "{{route('role.index')}}"
      }, {
        title: '权限列表',
        href: ""
      }]
    }]
  };
 
  var getTpl = menuTpl.innerHTML,
    view = document.getElementById('menu');
  laytpl(getTpl).render(data, function(html) {
    view.innerHTML = html;
  });
    //初始化动态元素,一些动态生成的元素如果不设置初始化,将不会有默认的动态效果
  element.render();

这篇浅谈layui使用模板引擎动态渲染元素要注意的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现id模糊查询的小例子
Mar 19 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
javascript实现日期格式转换
Dec 16 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
Aug 02 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
Layui Form 自定义验证的实例代码
Sep 14 #Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 #Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 #Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 #Javascript
vue登录注册实例详解
Sep 14 #Javascript
javascript合并两个数组最简单的实现方法
Sep 14 #Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 #Javascript
You might like
用PHP生成html分页列表的代码
2007/03/18 PHP
php绘制圆形的方法
2015/01/24 PHP
php实例化一个类的具体方法
2019/09/19 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python基于右递归解决八皇后问题的方法
2015/05/25 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
实习鉴定范文
2013/12/19 职场文书
法学专业自我鉴定
2014/02/05 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers