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 有就去掉。

一行代码，搞定之。

哈哈哈哈哈哈哈~~

问题咨询，加我微信：