淺談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)代碼時候碰到了，元素是成功渲染出來，但是折疊動畫效果和點擊事件都失效了，然后仔細(xì)看了一下官方文檔
官方文檔原話：跟表單元素一樣，很多時候你的頁面元素可能是動態(tài)生成的，這時element的相關(guān)功能將不會對其有效，你必須手工執(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: '權(quán)限列表',
icon: 'layui-icon-auz',
expand: 'layui-nav-itemed', //是否默認(rèn)展開
child: [{
title: '管理員列表',
href: "{{route('admin.list')}}"
}, {
title: '角色列表',
href: "{{route('role.index')}}"
}, {
title: '權(quán)限列表',
href: ""
}]
}]
};
var getTpl = menuTpl.innerHTML,
view = document.getElementById('menu');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
//初始化動態(tài)元素，一些動態(tài)生成的元素如果不設(shè)置初始化，將不會有默認(rèn)的動態(tài)效果
element.render();
這篇淺談layui使用模板引擎動態(tài)渲染元素要注意的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- layui動態(tài)渲染生成select的option值方法
- layui動態(tài)渲染生成左側(cè)3級菜單的方法(根據(jù)后臺返回數(shù)據(jù))
- layui的布局和表格的渲染以及動態(tài)生成表格的方法
- 解決使用layui的時候form表單中的select等不能渲染的問題
- layui使用表格渲染獲取行數(shù)據(jù)的例子
- layui問題之渲染數(shù)據(jù)表格時,僅出現(xiàn)10條數(shù)據(jù)的解決方法
- 解決layui 表單元素radio不顯示渲染的問題
- 使用layui 渲染table數(shù)據(jù)表格的實例代碼
- layui框架table 數(shù)據(jù)表格的方法級渲染詳解
- layUI ajax加載html頁面后重新渲染的方法
- 解決Layui當(dāng)中的導(dǎo)航條動態(tài)添加后渲染失敗的問題
相關(guān)文章
詳解JavaScript如何實現(xiàn)一個簡易的Promise對象
Promise對象的作用將異步操作以同步操作的流程表達(dá)出來，避免層層嵌套的回調(diào)函數(shù)，而且Promise提供了統(tǒng)一的接口，使得控制異步操作更加容易。本文介紹了如何實現(xiàn)一個簡單的Promise對象，需要的可以參考一下2022-11-11
前一篇《關(guān)于selector性能比賽》中提到，目測覺得在$("div,p,a")這樣有逗號時，sizzle耗時異常（600多個元素，花了200ms），說是它可能沒有優(yōu)化ie下的排序。2011-01-01
模板淘寶首頁的分類列表效果，17173的游戲分類效果也不錯。2009-04-04
axios基于http客戶端的promise，面向瀏覽器和nodejs?axios?依賴原生的?ES6?Promise?實現(xiàn)而被支持，這篇文章主要介紹了axios常見配置選項?跨域,需要的朋友可以參考下2022-11-11
微信小程序?qū)W習(xí)筆記之函數(shù)定義、頁面渲染圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之函數(shù)定義、頁面渲染,結(jié)合實例形式較為詳細(xì)的分析了微信小程序中函數(shù)的定義、生命周期、模板調(diào)用、樣式控制等操作技巧,并配合圖文形式進行了詳細(xì)說明,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了JavaScript面向?qū)ο蟪绦蛟O(shè)計教程的相關(guān)資料,需要的朋友可以參考下2016-03-03
聯(lián)合類型在?TypeScript?中相當(dāng)流行，你可能已經(jīng)用過很多次了。交叉類型稍微不那么常見，它們似乎引起更多的困惑，這篇文章主要介紹了一文讀懂TS?中聯(lián)合類型和交叉類型的含義,需要的朋友可以參考下2022-12-12
Select標(biāo)簽下拉列表二級聯(lián)動級聯(lián)實例代碼
這篇文章主要介紹了Select標(biāo)簽下拉列表二級聯(lián)動級聯(lián)實例代碼,需要的朋友可以參考下2014-02-02
JavaScript中的this陷阱的最全收集并整理(沒有之一)
這篇文章主要介紹了JavaScript中的this陷阱的最全收集,需要的朋友可以參考下2017-02-02
談及過年，最先讓人想到的就是，噼里啪啦的鞭炮聲。本文將利用JavaScript實現(xiàn)一個簡單的放鞭炮動畫效果，感興趣的小伙伴可以了解一下2023-01-01