浅谈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 相关文章推荐
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
vue-axios使用详解
May 10 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
支付宝小程序实现省市区三级联动
Jun 21 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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
ini_set的用法介绍
2014/01/07 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
python 计算文件的md5值实例
2017/01/13 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Python的语言类型(详解)
2017/06/24 Python
Python绘制3D图形
2018/05/03 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
简单的Python调度器Schedule详解
2019/08/30 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
党校学习思想汇报
2014/01/06 职场文书
银行贷款承诺书
2014/03/29 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书