1

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

4

1 回答 1

0

我所做的是使用渲染 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来显示/隐藏组件。

于 2016-11-29T18:00:12.787 回答