浅谈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 相关文章推荐
javascript入门·对象属性方法大总结
Oct 01 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 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新手上路(三)
2006/10/09 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
深入浅析Python中的yield关键字
2018/01/24 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
python实现抽奖小程序
2020/04/15 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
费用会计岗位职责
2014/01/01 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
授权委托书样本
2014/09/25 职场文书
2014年技术员工作总结
2014/11/18 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python