使用带有 turbolinks 的 Smooch 小部件答案

【问题标题】：Using Smooch widget with turbolinks使用带有 turbolinks 的 Smooch 小部件
【发布时间】：2016-11-30 02:00:12
【问题描述】：

我正在使用 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 持久保存的组件？

【问题讨论】：

Smooch Web 小部件在 React 上运行，我想这可能会被 turbolinks 混淆.. 所以我怀疑如果不付出一些努力，这将无法工作。快速搜索一下：github.com/ssorallen/turbo-react 你可以试一试。
有趣，我会看看那个。我实际上设法渲染了一个永久的 smooch 组件，我必须在 dom 加载回调中运行渲染。尽管如此，当使用嵌入式模式时，没有样式，也没有切换功能，所以我可能会使用 react 组件重新创建样式。

标签： ruby-on-rails turbolinks smooch

【解决方案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 来显示/隐藏组件。

【讨论】：