DDR爱好者之家

浅谈layui使用模板引擎动态渲染元素要注意的问题
站长资源 2024/11/25 佚名
42 1538
DDR爱好者之家 Design By 杰米

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

本人在实现使用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使用模板引擎动态渲染元素要注意的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米