浅谈layui使用模板引擎动态渲染元素要注意的问题-创新互联
摸索这个模板引擎碰到的问题,分享一下
成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于网站制作、成都做网站、东湖网络推广、小程序定制开发、东湖网络营销、东湖企业策划、东湖品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;成都创新互联公司为所有大学生创业者提供东湖建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com本人在实现使用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();
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:浅谈layui使用模板引擎动态渲染元素要注意的问题-创新互联
分享URL:http://pwwzsj.com/article/degieh.html