我可以在twitter-bootstrap popover数据内容中使用html标签吗？ [英] Can I use html tags in twitter-bootstrap popover data-content?

问题描述

我在Rails 3.1.3应用程序中使用Twitter-Bootstrap。我有许多元素与popovers如：

I'm using Twitter-Bootstrap within a Rails 3.1.3 application. I have numerous elements with popovers like:

<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>

我想在内容部分中有一个类似于以下内容的有序列表：

I'd like to have an ordered list in the content section similar to:

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

有没有一种简单的方法可以在不修改JavaScript的情况下执行此操作？无论我尝试什么，html代码都会显示在浏览器上，而不是被解释为这样。

Is there a simple way to do this without modifying the JavaScript? Whatever I try, the html code is displayed on the browser instead of being interpreted as such.

更新

根据David的建议使用以下代码

Using the following code per David's suggestion

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 hash with a dash在一个键。所以我正在使用：

generates a syntax error with my setup. I think this explains why: Ruby 1.9 hash with a dash in a key . So I'm using:

<%= 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：

This doesn't work. It generates the following 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>

推荐答案

您需要创建一个具有 html 选项已启用（在弹出的JS代码后将其放在您的javascript文件中）：

You need to create a popover instance that has the html option enabled (place this in your javascript file after the popover JS code):

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

然后链接语法为：

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

如果您动态生成内容，则需要使用 html_safe 就像David建议的那样Rails不会逃避HTML代码。否则，您可以直接将HTML放在该内容属性中。

If you're dynamically generating the content, then you need to use html_safe like David suggested so Rails doesn't escape the HTML code. Otherwise, you can just place HTML directly within that content attribute.

这篇关于我可以在twitter-bootstrap popover数据内容中使用html标签吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！