淺談layui使用模板引擎動態(tài)渲染元素要注意的問題

更新時間：2019年09月14日 22:32:28 作者：Q-u-a-n

今天小編就為大家分享一篇淺談layui使用模板引擎動態(tài)渲染元素要注意的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

摸索這個模板引擎碰到的問題，分享一下

本人在實現(xiàn)使用laytpl實現(xiàn)動態(tài)渲染菜單，來減少靜態(tài)代碼時候碰到了，元素是成功渲染出來，但是折疊動畫效果和點擊事件都失效了，然后仔細看了一下官方文檔

官方文檔原話：跟表單元素一樣，很多時候你的頁面元素可能是動態(tài)生成的，這時element的相關功能將不會對其有效，你必須手工執(zhí)行 element.init(type, filter)方法即可。注意：2.1.6 開始，可以用 element.render(type, filter);

意思是我們動態(tài)渲染頁面的時候，渲染完后一定要執(zhí)行element.init（）進行重新渲染，這樣動畫效果和事件才能正常運行

以下是我實現(xiàn)layui模板引擎實現(xiàn)動態(tài)菜單源碼

 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;
  });
    //初始化動態(tài)元素，一些動態(tài)生成的元素如果不設置初始化，將不會有默認的動態(tài)效果
  element.render();

這篇淺談layui使用模板引擎動態(tài)渲染元素要注意的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript實現(xiàn)模態(tài)對話框實例
這篇文章主要介紹了JavaScript實現(xiàn)模態(tài)對話框實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-01-01
Js操作樹節(jié)點自動折疊展開的幾種方法
這篇文章主要介紹了Js操作樹節(jié)點自動折疊展開的幾種方法,需要的朋友可以參考下
2014-05-05
選擇復選框按鈕置灰否則按鈕可用
這篇文章主要介紹了使用js實現(xiàn)選擇復選框按鈕置灰否則按鈕可用,需要的朋友可以參考下
2014-05-05
JavaScript實現(xiàn)頁面中錄音功能的方法
這篇文章主要給大家介紹了關于JavaScript實現(xiàn)頁面中錄音功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-06-06
js實現(xiàn)簡易計數(shù)器功能
這篇文章主要為大家詳細介紹了js實現(xiàn)計數(shù)器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
在html頁面上拖放移動標簽
在html頁面上拖放移動標簽，需要的朋友可以參考下。
2010-01-01
小試JavaScript多線程
這兩天一直在弄ajax，用多了才發(fā)現(xiàn)了ajax 的cache問題，請求了好多次，得到了確是相同的結果，經常我想在請求的同時去做一些其它的事情，我在想javascript里有沒有辦法用多線程，經過在網上查找找到了結果。
2008-11-11
JS簡單實現(xiàn)浮動窗口效果示例
這篇文章主要介紹了JS簡單實現(xiàn)浮動窗口效果,涉及javascript操作浮動窗口的創(chuàng)建、打開、關閉等相關操作技巧,需要的朋友可以參考下
2016-09-09
JavaScript中可選鏈(?.)用法示例詳解
這篇文章主要為大家介紹了JavaScript中可選鏈(?.)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
jsTree樹控件(基于jQuery, 超強悍)[推薦]
jsTree是基于javascript的一個跨瀏覽器樹控件，功能強大，而且是免費的。
2009-09-09