浅谈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对象、属性、事件手册集合方便查询
Jul 04 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
jquery的live使用注意事项
Feb 18 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
小程序组件之自定义顶部导航实例
Jun 12 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/02/05 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
javascript multibox 全选
2009/03/22 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
python3简单实现微信爬虫
2015/04/09 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
python 杀死自身进程的实现方法
2019/07/01 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
进步之星获奖感言
2014/02/22 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
民事申诉状范本
2015/05/20 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server