web-dev-qa-db-ja.com

Twitter-bootstrap popover data-contentでhtmlタグを使用できますか？

私はRails 3.1.3アプリケーションでTwitter-Bootstrapを使用しています。

<a data-original-title="Quality" rel="popover" data-content="Did they do a good job?  5 for Really Nice, 4 for Good Enough, 3 for Average, 2 for Somewhat OK, 1 for Really Bad">Q</a>

コンテンツセクションに、次のような順序付けられたリストがあります。

<OL reversed="reversed">
  <LI> for Really Nice </LI>
  <LI> for Good Enough </LI>
  ...
</OL>

JavaScriptを変更せずにこれを行う簡単な方法はありますか？何を試しても、HTMLコードはブラウザに表示されるのではなく、ブラウザに表示されます。

[〜＃〜] update [〜＃〜]

Davidの提案に従って次のコードを使用する

link_to 'Q', '#', options: { data-original-title: "Quality", rel: 'popover', data-content: "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe }

セットアップで構文エラーが生成されます。これが理由を説明していると思います： キーにダッシュを含むRuby 1.9ハッシュ だから私は使用しています：

<%= link_to 'Q', '#', options: { :"data-original-title" => "Quality", :rel => 'popover', :"data-content" => "Did they do a good job? <ol><li> for Really Nice </li></ol>".html_safe } %>

これは機能しません。次のHTMLを生成します。

<a href="#" options="{:&quot;data-original-title&quot;=&gt;&quot;Quality&quot;, :rel=&gt;&quot;popover&quot;, :&quot;data-content&quot;=&gt;&quot;Did they do a good job? &lt;ol&gt;&lt;li&gt; for Really Nice &lt;/li&gt;&lt;/ol&gt;&quot;}">Q</a>
javascriptruby-on-railstwitter-bootstrap
44
Arman

htmlオプションが有効になっているポップオーバーインスタンスを作成する必要があります（ポップオーバーJSコードの後に​​javascriptファイルに配置します）。

$('.popover-with-html').popover({ html : true });

次に、リンク構文は次のようになります。

<%= link_to('Q', '#', :class => "popover-with-html", :title => "Quality", "data-content" => "#{some_content_object.html_safe}") %>

コンテンツを動的に生成する場合は、Davidが提案したようにhtml_safeを使用する必要がありますRailsはHTMLコードをエスケープしません。そうでなければ、HTMLを直接配置できますそのコンテンツ属性。

89
iwasrobbed

はい、できますが、html_safe（文字列がRailsによって生成された場合）

link_to 'Q', '#', :title => "Quality", :rel => 'popover', "data-content" => "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe }
0
David Sulc