关于layui使用模板引擎动态渲染元素注意问题

本文介绍使用layui框架的laytpl模板引擎实现动态菜单渲染的过程及遇到的问题。通过手动调用element.render()方法解决动态生成元素的动画效果和点击事件失效问题。

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

本人在实现使用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();

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值