使用带有turbolinks的Smooch小部件

Question

我正在开发一个使用turbolinks的rails应用程序，并试图让Smooch小部件与turbolinks一起工作。

问题是，当turbolinks在每次页面加载时替换页面正文时，我初始化的小部件将从页面中删除。

我尝试使用嵌入式模式并设置data-turbolinks-permanent，如下所示：

Smooch.init({ appToken: token, embedded: true });  
Smooch.render(document.getElementById('smooch-container'));

<div id='smooch-container' data-turbolinks-permanent></div>

但是看起来smooch甚至没有在这个容器中插入小部件：

<div id="smooch-container" data-turbolinks-permanent=""></div>
<div id="sk-holder">...</div>

我如何使用我需要在页面加载中持久化的组件？

Answer 1

我所做的是在呈现React组件的地方使用私有_container变量：

$(document).on('turbolinks:before-cache', function () {
  Smooch._container && $(Smooch._container).detach();
});

$(document).on('turbolinks:render', function () {
    Smooch._container && $('body').append(Smooch._container);
});

当加载新页面时，我们将组件附加到DOM。

动画不能正常工作，所以我必须覆盖CSS动画，并使用opacity来显示/隐藏组件。