我正在使用Rails 5 with turbolinks和summernote這是一個簡單的所見即所得編輯器。我目前加載插件上turbolinks：負載，就像這樣：Turbolinks複製富文本編輯器

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

但如果我瀏覽別的地方，然後按我的瀏覽器後退按鈕編輯器被複制

我試着用jquery文檔準備好，但是除非我首先加載的頁面是帶編輯器的頁面，否則插件不會被加載。請幫忙。

來源

2016-11-17 Ed_

必須在一個特定的'id' initialiaze summernote不是'$（本）' – EaBangalore

我知道Turbolinks在Rails 4.2和5之間有一些變化，但這是我的承擔。

在許多情況下，您可以簡單地調整代碼以監聽turbolinks：加載事件，該事件在初始頁面加載時觸發一次，並在每次Turbolink訪問後再次觸發。

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

如果上述報價是正確的，那麼每次訪問的頁面（不論ready或page:load）的的TurboLink觸發條件會。

現在有一個關於Turbolinks的誤解是，訪問另一個頁面會破壞該頁面中的JavaScript元素。

這是錯誤的，實際上這是Turbolink在Rails 4.2中的一個大問題。

您可以通過做測試了這一點（沒有把我的話）：

$(document).ready(...)

然後重新載入頁面，導航離開，然後回來。

如果你的代碼仍然被實例化，那麼這證明代碼是持久的。

如果是這樣，那麼我們需要重新思考我們如何使用JS。

所以代碼依然存在，而且on意味着每一次，但是我們希望它一次發生，無論瀏覽器是否加載頁面或者使用turbolinks。

我認爲合適的辦法是：

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

編輯

我能夠完全重現該問題。

然而，我認爲行爲是......正確的。

的問題如下：

Summernote創建下方的<div data-provide="summernote" elems的然後設置style="display:none;
所有元素（包括那些由summernote加）被緩存。
然後，當代碼被重新執行時（因爲它應該除非它是這樣表示的）代碼發現<div data-provide="summernote">只是在上面冷卻並重新創建另一個summernote框。

現在到了一個哲學問題，這將改變應用有什麼解決辦法：

我們應該緩存的頁面？

如果答案是肯定的，那麼唯一的選擇就是使用summernote set的div來隱藏我們的優勢。

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

注意，我們可以區分不同的實例summernote格（即添加類或數據屬性），但是這僅僅是一個方便的途徑。

否則，通過不緩存頁面，一切都會重新執行，並且一切都很好。

P.S.使用Turbolinks時總是會有複雜的問題，並不是因爲它是一個糟糕的工具。但是因爲JS庫對你的頁面循環如何工作假設並且Turbolinks是對頁面循環如何工作的徹底檢查。

希望這有助於不僅提供解決方案，但也有一些理解！

乾杯

來源

2016-11-17 16:45:03 fbelanger

謝謝，這是一個很好的解釋，但錯誤保持與。一（發生），因爲「注Turbolinks使用cloneNode（true）複製頁面，這意味着所有附加的事件監聽器和相關數據都將被丟棄。「現在我只是關閉了緩存，現在正在工作，但我希望我能找到一種替代解決方案。 –

嗯..這是呃，這不就是說，重複的summernote應該永遠不會發生在第一位？或者我誤解了這個？我打算去測試一下，brb。 – fbelanger

@Ed_我轉載了這個問題並更新了我的答案！ – fbelanger

Turbolinks複製富文本編輯器

回答

編輯

相關問題