浅谈layui使用模板引擎动态渲染元素要注意的问题
更新时间：2019年09月14日 22:32:28 作者：Q-u-a-n
今天小编就为大家分享一篇浅谈layui使用模板引擎动态渲染元素要注意的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
摸索这个模板引擎碰到的问题，分享一下
本人在实现使用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实现模态对话框实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了Js操作树节点自动折叠展开的几种方法,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了使用js实现选择复选框按钮置灰否则按钮可用,需要的朋友可以参考下2014-05-05
这篇文章主要给大家介绍了关于JavaScript实现页面中录音功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要为大家详细介绍了js实现计数器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
在html页面上拖放移动标签，需要的朋友可以参考下。2010-01-01
这两天一直在弄ajax，用多了才发现了ajax 的cache问题，请求了好多次，得到了确是相同的结果，经常我想在请求的同时去做一些其它的事情，我在想javascript里有没有办法用多线程，经过在网上查找找到了结果。2008-11-11
这篇文章主要介绍了JS简单实现浮动窗口效果,涉及javascript操作浮动窗口的创建、打开、关闭等相关操作技巧,需要的朋友可以参考下2016-09-09
这篇文章主要为大家介绍了JavaScript中可选链(?.)用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04![jsTree树控件(基于jQuery, 超强悍)[推荐]](//img.jbzj.com/images/xgimg/bcimg9.png)
jsTree是基于javascript的一个跨浏览器树控件，功能强大，而且是免费的。2009-09-09
![jsTree树控件(基于jQuery, 超强悍)[推荐]](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论