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


Posted in Javascript onSeptember 14, 2019

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

本人在实现使用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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
实现JavaScript中继承的三种方式
Oct 16 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
Layui Form 自定义验证的实例代码
Sep 14 #Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 #Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 #Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 #Javascript
vue登录注册实例详解
Sep 14 #Javascript
javascript合并两个数组最简单的实现方法
Sep 14 #Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 #Javascript
You might like
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
原生js写的放大镜效果
2012/08/22 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python3编码问题汇总
2016/09/06 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python中JWT用户认证的实现
2020/05/18 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
新学期标语
2014/06/30 职场文书
2014年科普工作总结
2014/12/06 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
详解Redis复制原理
2021/06/04 Redis
python接口测试返回数据为字典取值方式
2022/02/12 Python
德生BCL3000抢先使用感受和评价
2022/04/07 无线电