joppot

コピペで絶対動く。説明を妥協しない

プログラミング

railsのgonで別ページでリロード後turbolinksで移動したら変数がundefindする場合の対処

投稿日:2016年5月7日 更新日:

Pocket

gon_top_thumb

概要

(追記 2016/05/18

この方法を行うと、turbolinksで問題が起きました。
turbolinksで移動した回数だけ、javascriptが実行されてしまいました。
例えば、
<%= link_to 'Destroy', item, method: :delete, data: { confirm: 'Are you sure?' } %>

というところで、confirmが移動した回数だけ表示されました。
原因はこの記事の

<%= Gon::Base.render_data %>

にあります。gonのscriptのアウトプットをdivで囲うと問題が起こりました。なので、別の方法が思いつくまで、
しばらく、消去線をつけておきます。

(追記 2016/05/19
gonはgithubではapp/views/layouts/application.html.erbに
<%= Gon::Base.render_data %>
を記述するように書いてありますが、これだとturbolinksに対応しません。

今のところ、一番簡単な解決方法はgonの変数を定義しているアクションのviewに
<%= Gon::Base.render_data %>
を書く方法がうまくいきます。

みさなさんこんにちはcandleです。今回は今回はgonを使った場合にgonの値がundefindになってしまう場合の対処です。

実際にやってみると以下のようなエラーが出ます。

例えば、pagesコントローラーのtopアクションで、gonに値を入れます。
gon_value

ここではcoffee scriptで書きますが、こんな感じで、値があれば、コンソールとbodyタグ直下に値を表示するようにします。

gon.testshow

pagesのtopアクションにアクセスすると、以下のように表示されます。
pages_top_show_ok

続いて、別のページにリンクからturbolinksで移動して、ページをリロードして戻ってくると、gon.testに入れた値が未定義になってしまします。

undefined_test_value-1

今回はこちらにあるgithubのissueに上がっている方法を使用しました。

https://github.com/gazay/gon/issues/106

前提

gonが入っている。

SPONSORED LINK


gonの値を正しく読み込む

上記のURL先にもあるように、まずはapp/views/layouts/application.html.erbを開きます。

そしたら、<%= Gon::Base.render_data %>を

で囲います。

<div id="gonvariables">
  <%= Gon::Base.render_data %>
</div>

nest_with_div-1

coffee scriptのファイルを開きます。私はapp/assets/javascripts/pages.coffeeに記述します。

以下を記述します。

gonfix = ->
  eval $('#gonvariables > script').html()
$(document).on 'page:restore', gonfix

fire_gon

このスクリプトはdiv id = #gonvariablesの中にscriptタグがあったら、無理やり実行するというものです。
evalはむやみやたらに使うのは推奨され無いことがあるのですが、Gemが改善されるまでの応急処置として十分ですね。

これで、どこでページリロードして、gon.testが定義されていなくても、私の場合はpagesコントローラーのtopアクションにくると、正しく値がセットされます。

goodvalue-1

まとめ
余談なのですが、私はいつもcoffeeでは

$(document).on ‘ready page:load’, ->
を使用していたのですが、page:loadはturbolinksのリンクをクリックするたびに、内部の処理回数が1つづつ増えていくのですね。
驚きました。
もう少し勉強して、turbolinksの正しい使い方をします。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

wordpressのbogoプラグインのショートコードをカスタマイズする

English 日本語 概要 みなさんこんにちはcandleです。 今回はwordpress bogoのショートコードをカスタマイズしてみたいと思います。 紹介する項目は以下の2つです。 国旗の表示、 …

Rails pluginでengineを使ったgemの作り方[6](config編)

概要 みなさんこんにちはcandleです。今回は前回に引き続き、gemの作成をやっていきます。 gemのconfigとは恐らく一般的に以下の様な状況の時に使う事になると思います。 例えば、gemのプロ …

gitpythonでfirst commitする

概要 みなさんこんにちはcandleです。今回はgitpythonで、初めてのコミットをする方法を紹介します。 gitpythonでコミットは難しくないのですが、初めてのコミットは要領が違ったので、ま …

react0.14 + gulp + express + babelでReactのチュートリアル環境構築をする

概要 みなさんこんにちはcandleです。今回は、react0.14のnodeの環境構築をします。 react0.14はまだまだ、開発段階にあり、しばしば仕様変更が行われています。 0.13の時では使 …

Mac OS 10.9 Marvericks のMacportsでインストールしたOpencv2.4.8はXcode5、ターミナルでは使えない

概要 みなさんこんにちはcandleです。今回はopencv2.4.8が使えないという事を記事にさせてもらいます。 とは言うものの、2014年2月16日の話であって、今後修正されていくと思うので、その …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

twitter

スポンサードリンク

アーカイブ