快捷導(dǎo)航

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

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

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

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

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

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

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

以下是我實(shí)現(xiàn)layui模板引擎實(shí)現(xiàn)動(dòng)態(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;
  });
    //初始化動(dòng)態(tài)元素，一些動(dòng)態(tài)生成的元素如果不設(shè)置初始化，將不會(huì)有默認(rèn)的動(dòng)態(tài)效果
  element.render();

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

您可能感興趣的文章:

相關(guān)文章

這篇文章主要介紹了JavaScript實(shí)現(xiàn)模態(tài)對(duì)話框?qū)嵗?文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-01-01

Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法

這篇文章主要介紹了Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法,需要的朋友可以參考下

2014-05-05

選擇復(fù)選框按鈕置灰否則按鈕可用

這篇文章主要介紹了使用js實(shí)現(xiàn)選擇復(fù)選框按鈕置灰否則按鈕可用,需要的朋友可以參考下

2014-05-05

JavaScript實(shí)現(xiàn)頁面中錄音功能的方法

這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)頁面中錄音功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

2019-06-06

js實(shí)現(xiàn)簡(jiǎn)易計(jì)數(shù)器功能

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)計(jì)數(shù)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

2022-08-08

在html頁面上拖放移動(dòng)標(biāo)簽

在html頁面上拖放移動(dòng)標(biāo)簽，需要的朋友可以參考下。

2010-01-01

小試JavaScript多線程

這兩天一直在弄ajax，用多了才發(fā)現(xiàn)了ajax 的cache問題，請(qǐng)求了好多次，得到了確是相同的結(jié)果，經(jīng)常我想在請(qǐng)求的同時(shí)去做一些其它的事情，我在想javascript里有沒有辦法用多線程，經(jīng)過在網(wǎng)上查找找到了結(jié)果。

2008-11-11