将 Smooch 小部件与 turbolinks 结合使用

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 组件的地方使用私有 _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 到 show/hide 组件。

将 Smooch 小部件与 turbolinks 结合使用

Using Smooch widget with turbolinks

ruby-on-rails

turbolinks

smooch