リッチテキストエディタを複製するターボリンク

Question

私は単純なWYSIWYGエディタであるturbolinksとsummernoteでRails 5を使用しています。このように、負荷を：私は現在turbolinksにプラグインをロードしています

$(document).on('turbolinks:load', function() { 
    $('[data-provider="summernote"]').each(function(){ 
    $(this).summernote({ }); 
    }) 
} 

しかし、私はどこか別の場所に移動し、私のブラウザでバックボタンを押すと、エディタは

を複製します私はjqueryのドキュメントを準備してみましたが、最初にロードするページがエディタのものでなければ、プラグインはロードされません。助けてください。

Answer 1

Rails 4.2と5の間でTurbolinksにいくつかの変更があることは知っていますが、これは私の取り組みです。

多くの場合、turbolinks：loadイベントを聞くようにコードを調整するだけで、初期ページのロード時に1回、各Turbolinks訪問後に1回発生します。

https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

上記の引用は、右のであれば、毎回あなたがturbolinkトリガーが起動します（readyまたはpage:loadのかどうか）のページをご覧ください。

ターボリンクに関する誤解の1つは、別のページにアクセスするとそのページ内のJavaScript要素が破壊されることです。

これは誤っています。実際、これはTurbolink in Rails 4.2の大きな問題でした。

次の操作を行うことにより（それは私の言葉を取る必要はありません）これをテストすることができます。

$(document).ready(...) 

を次に戻ってくる、その後、離れて移動し、ページをリロードします。

コードがまだインスタンス化されている場合、コードが永続化されていることが証明されます。

これが当てはまる場合は、JSの仕組みを再考する必要があります。

したがって、コードは継続され、onは毎回のことを意味しますが、ブラウザまたはターボリンクによってページがロードされたかどうかは一度発生する必要があります。

私は適切な解決策があることだと思う：

$(document).one('turbolink:load', ...) 

EDIT

私は完全に問題を再作成することができました。

しかし、その動作は正しいと思います。次のように

問題は、次のとおりです。

1. Summernoteはあなた<div data-provide="summernote"以下elemsを作成し、その後、キャッシュされている（summernoteによって追加ものを含む）style="display:none;
2. すべての要素を設定します。
3. コードが再実行されると（上記のような表現でなければならないので）コードは<div data-provide="summernote">を見つけて別のsummernoteボックスを再作成します。我々はページをキャッシュすべき

   ：

今すぐ適用何ソリューション変わる哲学的な質問が来ますか？

回答がyesの場合、唯一の選択肢は、summernoteセットのdivを私たちの利益に隠すという事実を使用することです。

$(document).on('turbolinks:load', function() { 
    $('[data-provider="summernote"]').each(function() { 
    if ($(this).is(":visible")) 
     $(this).summernote() 
    }) 
}) 

我々は（すなわち、クラス、またはデータ属性を追加すること）、異なるインスタンス化summernote div要素を区別することができますが、これは単なる便利な方法であることに注意してください。

ページがキャッシュされないと、すべてが再実行され、すべて正常です。

P.S.ターボリンクを使用している間は、それは悪いツールではないので、常に複雑なことがあります。しかし、JSライブラリはページサイクルがどのように機能するかを前提にしているため、Turbolinksはページサイクルの仕組みを完全に見直したものです。

希望の解決策を提供するだけでなく、いくつかの理解を助けることを望みます！

乾杯