PJAX模式下使用Laydate時間組件二次渲染問題解決方案

JBolt極速開發平臺裏的自動化時間組件，用的是laydate.js，在layui裏可使用，在非layui裏也能夠獨立版使用。

這裏我使用的是獨立版。

遇到的問題：

和前面我分享的PJAX下的UEditor和Webcam組件，都是出現二次渲染的問題。

第二次執行laydate.render的時候，組件失效，不報錯，也不顯示了！

【分享】Pjax模式下集成一個同時支持IE和Chrome的webcam組件

【分享】PJAX模式下使用UEditor如何避免二次加載頁面初始化失敗？

laydate的調用方式以下：

針對一個輸入框元素，給一個ID就好了，自動完成了初始化和事件綁定，這裏我設置的是click的時候，觸發渲染時間組件的彈出，默認不寫就是focus的時候。

點擊輸入框，正常彈出了。

那麼，二次渲染怎麼重現這個問題呢？

pjax加載的，只要打開新頁面，而後瀏覽器返回到本界面，就完成了二次調用laydate.render，這樣bug就復現了！

如何處理？

咱們如今分析一下這個bug出現的緣由：

首先，咱們來看第一次渲染以後，組件和頁面裏都有什麼變化？

一、input組件自己變化

從下圖能夠看出，通過laydate的render以後，在全局laydate給input組件初始化，增長了一個屬性lay-key="1" 有具體的賦值，並且從新刷新頁面以後，這個值仍是lay-key="1」說明這個值是一個渲染順序。頁面上其餘的input通過laydate渲染後也有了相應的值。

那麼這個值有何用？正是下面要說的第二個變化：

二、頁面底部動態增長元素，id與lay-key對應。

好了，通過頁面代碼的分析咱們就知道，laydate.render執行後呢，頁面的元素都有了綁定和變化。

lay-key和彈出層都是對應的。並且手動點擊左側導航去切換頁面，在點擊laydate的demo頁面進來，這種主動觸發加載的行爲，是沒有問題的，並且laydate組件的渲染lay-key的順序是繼續增長的，一樣第一個input組件，在首次render的時候給的lay-key="1",再次主動觸發加載頁面，至關因而全新加載的頁面，laydate把它當作是全新組件渲染，會給自身隊列中繼續累加數量。

這個能夠看一下，點擊進入幾回以後的lay-key="23"

可是PJAX技術是相似瀏覽器自身緩存了加載的界面的狀態，當使用瀏覽器返回按鈕返回到本頁面的時候，並非去後臺從新加載渲染的本頁面，而是拿到的緩存，組件由於已經被渲染過了，自身的lay-key="1"還存在呢，laydate本身也懵逼了，一看有值就不從新綁定渲染了。

這就是，pjax下瀏覽器返回已經渲染過的界面後，laydate.render二次渲染失效的根本緣由。

那麼，怎麼辦呢？

這個要麼是Layui做者修復這個問題，能針對這種PJAX加載和回退瀏覽器從新渲染的問題作處理，要麼就按照個人方案，搞之。

個人方案是：

主動給它把lay-key去了，讓它再次懵逼，一看沒有lay-key那麼好吧，從新render一次。

具體就是，在laydate.render以前判斷是否已經有了lay-key 有就去掉。

一行代碼，搞定之。

哈哈哈哈哈哈哈~~

問題諮詢，加我微信：