js layui 模板属性 添加_js相关：浅谈layui使用模板引擎动态渲染元素要注意的问题...

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

发布于 2020-8-6|

复制链接

分享一篇关于浅谈layui使用模板引擎动态渲染元素要注意的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小妖过来看看吧

摸索这个模板引擎碰到的问题，分享一下本人在实现使用laytpl实现动态渲染菜单，来减少静态代码时候碰到了，元素是成功渲染出来，但是折叠动画效果和点击事件都失效了，然后仔细看了一下官方文档官方文档原话：跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter)方法即可。注意：2.1.6 开始，可以用 element.render(type, filter);意思是我们动态渲染页面的时候，渲染完后一定要执行element.init()进行重新渲染，这样动画效果和事件才能正常运行以下是我实现layui模板引擎实现动态菜单源码

```javascript

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();

```