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

分手后的思念是犯贱 2022-05-14 09:21 507阅读 0赞

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，507人围观）

还没有评论，来说两句吧...

相关阅读

相关 nodejs之模板引擎（渲染模板）

模板引擎模板引擎简介语法模板核心方法 template（filename，data）

- 日理万妓/ 2022年12月15日 06:10/ 0 赞/ 466 阅读

相关【layui】表单元素radio不显示渲染

最近一直在使用layui，一个对程序员相对友好的前端框架，很多效果都进行了初步的封装。在使用过程中遇到最多的问题就是引用的问题，各种模板无法使用，虽然都一一百度解决。本

╰+攻爆jí腚メ/ 2022年06月16日 01:44/ 0 赞/ 405 阅读

相关 Django（三）、模板引擎渲染

前言：在第一篇中已经了解到，django支持将html作为模板放在指定的路径中（templates）。同时，django模板引擎可以动态地获取数据，来渲染模板网页文件，实

￡神魔★判官ぃ/ 2022年06月01日 00:09/ 0 赞/ 317 阅读

相关 LayUi 之模板引擎

这个模板引擎说的就是当我们在做项目的过程中，我们有的情况下会发现一个页面不够我们使用，需要跳转页面或者是更改本页面展示的内容，但是我们如果单纯的跳转的话，地址栏会发生改变，我们

约定不等于承诺〃/ 2022年05月20日 04:27/ 0 赞/ 366 阅读

相关关于layui表格渲染templet解析单元格的问题

关于表格解析自定义单元格的解析参数请先详细查看官方文档：http://www.layui.com/doc/modules/table.html\templet 然后我简单说一

朱雀/ 2022年05月16日 05:07/ 0 赞/ 405 阅读

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

摸索这个模板引擎碰到的问题，分享一下本人在实现使用laytpl实现动态渲染菜单，来减少静态代码时候碰到了，元素是成功渲染出来，但是折叠动画效果和点击事件都失效了，然后仔细看

分手后的思念是犯贱/ 2022年05月14日 09:21/ 0 赞/ 508 阅读

相关 template模板引擎渲染

<div class="problems" id="content"> </div> <script id="test" type="text

深藏阁楼爱情的钟/ 2022年02月09日 14:11/ 0 赞/ 277 阅读

相关 Enjoy模板里使用layui模板引擎laytpl

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xfZGVn

ゝ一纸荒年。/ 2021年09月24日 05:08/ 0 赞/ 348 阅读

相关 Spring Boot使用Freemarker模板引擎渲染web视图

Spring Boot使用Freemarker模板引擎渲染视图,开发Web应用原创 [2018-04-03][] 宗野 [Spring Boot][]

逃离我推掉我的手/ 2021年09月15日 04:18/ 0 赞/ 515 阅读

相关 Spring Boot使用Thymeleaf模板引擎渲染web视图

Spring Boot开发Web应用原创 [2018-04-][]03 宗野 [Spring Boot][] > [Spring Boot快

不念不忘少年蓝@/ 2021年09月15日 04:18/ 0 赞/ 458 阅读