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

12 篇文章 1 订阅

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

本人在实现使用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的前端开发框架,可以帮助我们快速构建美观、简洁的界面。在Layui中,可以很方便地将动态数据渲染到模板中。 首先,我们需要使用Layui模板引擎来处理数据渲染Layui模板引擎基于JavaScript的模板引擎规范,可以通过简单的模板语法来完成数据绑定。 在模板中,我们可以通过{{ }}来引用变量,并将动态数据与界面元素进行绑定。例如,可以使用{{ username }}来显示用户名,{{ age }}来显示年龄等等。 接下来,我们需要将动态数据传递给模板引擎进行渲染。可以使用Layui的数据表格组件进行数据渲染。数据表格组件可以通过设置数据接口的方式,将后端返回的数据动态绑定到模板上。 在数据接口中,我们可以通过ajax请求后端接口,获取到后端返回的动态数据。然后,可以使用数据表格组件提供的方法,将获取到的数据进行渲染。 在渲染过程中,数据表格组件会根据模板引擎的规则,将动态数据与模板进行绑定。最后,生成带有动态数据的HTML代码,并将其插入到指定的DOM节点中。 这样,我们就可以在界面上看到动态数据的展示了。当后端数据发生变化时,可以通过重新进行数据请求和渲染,来更新界面上的动态数据。 总的来说,Layui可以通过模板引擎和数据表格组件,将动态数据渲染到模板中。这样可以很方便地实现前后端数据的绑定和展示。希望以上内容能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值