浅谈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滚动加载图片效果的实现
Mar 06 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
JS提交form表单实例分析
Dec 10 Javascript
精通JavaScript的this关键字
May 28 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JavaScript的类型、值和变量小结
2015/07/09 Javascript
学习jQuey中的return false
2015/12/18 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
python实现聊天小程序
2018/03/13 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
交通事故协议书
2014/04/15 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
实习生评语
2014/04/26 职场文书
宣传活动总结范文
2014/07/01 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
农村文化建设标语
2014/10/07 职场文书
教师师德表现自我评价
2015/03/05 职场文书
新闻稿标题
2015/07/18 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书