2011-12-13 15 views
44

Estoy usando Twitter-Bootstrap en una aplicación de Rails 3.1.3. Tengo numerosos elementos con panecillos como:¿Puedo usar etiquetas html en twitter-bootstrap popover data-content?

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

Me gustaría tener una lista ordenada en la sección de contenido similar a:

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

¿Hay una manera simple de hacer esto sin tener que modificar el código JavaScript ? Todo lo que intento, el código html se muestra en el navegador en lugar de ser interpretado como tal.

ACTUALIZACIÓN

Usando el siguiente código por sugerencia de 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 } 

genera un error de sintaxis con mi configuración. Creo que esto explica por qué: Ruby 1.9 hash with a dash in a key. Así que estoy usando:

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

Esto no funciona. Se genera el código HTML siguiente:

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

Respuesta

89

Es necesario crear una popover instancia que tiene la opción html permitido (lugar esto en su archivo JavaScript después del código JS popover):

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

a continuación, la sintaxis de enlace sería:

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

Si se está generando dinámicamente el contenido, entonces es necesario utilizar html_safe como David sugirió así que los carriles no se escape el código HTML. De lo contrario, puede colocar HTML directamente dentro de ese atributo de contenido.

+0

Con esta solución, las opciones HTML se pasan correctamente. Sin embargo, HTML aún no se interpreta para el contenido de datos. Esto es lo que muestra Firefox: Q Arman

+0

Funciona bien para mí tanto en Chrome como en Firefox. – iwasrobbed

+0

Parece que Rails está escapando del HTML antes de llegar a JS con la sintaxis anterior. Lo siguiente funciona con la opción "html: true" establecida: S Arman

0

sí, se puede hacer eso, pero hay que llamar html_safe en su cadena (si la cadena es generado por 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

Gracias David! Intenté tu sugerencia y creo que es el camino correcto. Sin embargo, "data-original-title" y "data-content" no son atributos HTML válidos que se pueden pasar a link_to. "title" funciona en lugar de "data-original-title". Sin embargo, no puedo encontrar nada que funcione en lugar de "contenido de datos". ¿Alguna sugerencia? – Arman

+0

Debería poder pasarlos dentro de un hash 'options'. Ver mi respuesta actualizada. –

+0

Con Ruby 1.9.2 su código genera un error de sintaxis. Tuve que usar <% = link_to 'Q', '#', opciones: {: "data-original-title" => "Calidad",: rel => 'popover',: "data-content" => " ¿Hicieron un buen trabajo?

  1. por realmente agradable
  2. ...
".html_safe}%" en su lugar. Esto tampoco está funcionando. El código HTML generado es: Q Arman

Cuestiones relacionadas