11

私はこのようなモーダルをやっています：

モーダルを示すリンク：

<%= link_to "versão resumida", resumed_rep_life_animal_path(animal, :partial => true), 'data-toggle' => 'modal', 'data-target' => '#myModal', 'data-no-turbolink' => true %>

モーダルhtml自体：

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body"></div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fechar</button>
  </div>
</div>

しかし、data-no-turbolink期待どおりに機能しないでください。data-no-turbolinkページを更新すると問題なく動作しますが、ターボリンクを使用してページを参照すると、が無視されているように見えます。

私は何か間違ったことをしていますか？私のアプリの例のようないくつかのモーダルがあり、それらを削除したくないし、ターボリンクも削除したくない...

前もって感謝します。

4

2 に答える 2

7

davydotcomが言ったように、モーダルが機能しない理由は、ターボリンクが使用するのではなく、モーダルがバインドされているため$(document).readyです$(document).on('page:change')。

jquery-turbolinks gemは、ready呼び出しがturbolinkのpage：change呼び出しにも応答するようにします。

ステップ1： gemjquery-turbolinksをGemfileに追加します。

ステップ2： JavaScriptマニフェストファイルに次の順序で追加します。

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

手順3：サーバーを再起動します。ブーム！

于 2015-01-30T18:11:55.507 に答える
2

data-no-turbolinksはここでは問題ではありません...

箱から出してすぐに使用できるブートストラップjsはdocument.readyのみを監視しているようです。また、ブートストラップJSは、page：loadもチェックするように変更する必要がある場合があります。

222行目を見てください

これは、ブートストラップが含まれている最初のリクエストでのみ発生します。page：loadでも起動するように変更する必要があります。

私ができる提案の1つは、ブートストラップを取得するためにgem'twitter-bootstrap-turbo'を使用することです。これはtwitter-bootstrap-railsのフォークであり、turbolinksハンドラーが追加されています。

于 2012-10-05T13:31:43.157 に答える