8201


javascriptにrubyの変数の内容を渡したいと考えています。  
具体的にはBootstrapのポップオーバーの内容をデータベースから持ってきたいです。

経験が浅いので、_common.js.erbを用意してrenderを呼び出すときに  
渡す方法しか思いつきませんでした。  
まだ試してはいないのですが、うまく動作すると思います。

２点教えていただきたいのですが、この方法でうまくいくでしょうか  
また、この方法を採用した場合に機能毎にファイルを分けてしまうと  
ソース自体が汚くなる気がします。他に賢い方法はないでしょうか？

_common.js.erb

[code]

    $(document).ready(function(){
    
      // ポップオーバー
      $("#popover").popover({
          html: true,
          placement: "bottom",
          content: <%= ここに変数を渡したい！ %>
      });
    });
    
[/code]


CC BY-SA 3.0
2015-03-20T09:07:09.957
8185
2015-03-20T22:54:30.413
8722
question
ruby ruby-on-rails
javascriptにrubyの変数を渡す


gonというgemを利用するとJavascriptにrubyの変数の値を渡すことができます。  
[コチラ](http://qiita.com/yk-212/items/8d648b83e24a43af17ba)に簡単な使い方がまとまっています。


CC BY-SA 3.0
2015-03-20T11:06:31.547
8192
2015-03-20T11:06:31.547
8351
8185
answer


目的に合致しているかどうかはわかりませんが、こんなサンプルを作ってみました。  
Nameをクリックすると誕生日がpopoverされます。

![画像の説明をここに入力](https://i.stack.imgur.com/keVG3.png)

実装としてはJSのpopoverメソッドに引数を渡すよりも、タグのdata属性経由で渡す方がシンプルだと思います。

[code]

    <% @people.each do |person| %>
      <tr>
        <td>
          <%= content_tag :span, 
                person.name, 
                data: { 
                  toggle: :popover, 
                  content: l(person.date_of_birth), 
                  placement: :bottom 
                } 
          %>
        </td>
        <td><%= person.date_of_birth %></td>
        (省略)
      </tr>
    <% end %>
    
[/code]

HTMLはこんな感じで出力されます。

[code]

    <span data-toggle="popover" data-content="1964-11-23" data-placement="bottom">
      Taro
    </span>
    
[/code]

そして、JS側はpopoverメソッドだけを単純にコールします。

[code]

    $(document).ready(function(){
      $('[data-toggle="popover"]').popover();
    });
    
[/code]

今回のサンプルアプリケーションはGitHubに置いているので参考にしてみてください。

<https://github.com/JunichiIto/js-popover-sandbox>

もし、何らかの事情でタグのdata属性が使えないようであれば質問に理由を追記してください。

### 追記

partial view(HTML)をpopoverで表示したいケースも書いておきます。

![画像の説明をここに入力](https://i.stack.imgur.com/m9XwJ.png)

[code]

    # views/people/_popover.html.erb
    <span class="glyphicon glyphicon-calendar"></span>
    <%= l person.date_of_birth %>
    
[/code]

[code]

    # views/people/index.html.erb
    <%= content_tag :span, 
          person.name, 
          data: { 
            toggle: :popover, 
            content: "#{render('popover', person: person)}", 
            placement: :bottom, 
            html: true 
          } 
    %>
    
[/code]

[code]

    # output.html
    <span data-toggle="popover" data-content="&lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
    1964-11-23" data-placement="bottom" data-html="true">Taro</span>
    
[/code]

コードは with-partial ブランチにあります。

<https://github.com/JunichiIto/js-popover-sandbox/tree/with-partial>

ちなみにHTMLバージョンを作った理由は質問のサンプルコードがこちらのページに載っているコードと似ていたからです。

<http://chisuke.net/2013/09/13/bootstrap-3-0-0_popover/>


CC BY-SA 3.0
2015-03-20T14:10:11.337
8201
2015-03-20T22:54:30.413
2015-03-20T22:54:30.413
85
85
8185
answer