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

时间:2021-05-18

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

本人在实现使用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使用模板引擎动态渲染元素要注意的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章