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>

如何通过turbolinks使用我需要在页面加载中保留的组件？

Answer 1

我所做的是使用提交React组件的private _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来显示/隐藏组件。

使用带有turbolinks的Smooch小部件

1 个答案: