2011-12-13 10 views
44

Sto usando Twitter-Bootstrap all'interno di un'applicazione Rails 3.1.3. Ho numerosi elementi con popovers come:Posso utilizzare tag html nel contenuto di dati pop-up di 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> 

Mi piacerebbe avere un elenco ordinato nella sezione contenuti simili a:

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

C'è un modo semplice per fare questo senza modificare il codice JavaScript ? Qualunque cosa provi, il codice html viene visualizzato sul browser anziché essere interpretato come tale.

UPDATE

utilizzando il seguente codice per il suggerimento di 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 errore di sintassi con la mia messa a punto. Penso che questo spieghi perché: Ruby 1.9 hash with a dash in a key. Quindi sto 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 } %> 

Questo non funziona. Genera il seguente codice 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> 

risposta

89

È necessario creare un esempio popover che ha l'opzione html abilitata (posto questo nel file javascript dopo il codice JS popover):

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

Poi la sintassi dei link sarebbe:

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

Se si sta generando dinamicamente il contenuto, allora avete bisogno di utilizzare html_safe come David ha suggerito in modo Rails non sfugge il codice HTML. Altrimenti, puoi semplicemente posizionare l'HTML direttamente all'interno di quell'attributo di contenuto.

+0

Con questa soluzione le opzioni HTML vengono passate correttamente. Tuttavia, l'HTML non è ancora interpretato per il contenuto dei dati. Questo è ciò che mostra Firefox: Q Arman

+0

Funziona bene per me sia in Chrome che in Firefox. – iwasrobbed

+0

Sembra che Rails stia sfuggendo all'HTML prima che arrivi a JS con la sintassi precedente. Quanto segue funziona con il set di opzioni "html: true": S Arman

0

Sì, si può fare, ma è necessario chiamare html_safe sulla stringa (se la stringa è generato da 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

Grazie David! Ho provato il tuo suggerimento e penso che sia la strada giusta. Tuttavia, "data-original-title" e "data-content" non sono attributi HTML validi che possono essere passati a link_to. "title" funziona invece di "data-original-title". Non riesco a trovare nulla che funzioni invece di "dati-contenuti" però. Eventuali suggerimenti? – Arman

+0

Dovresti essere in grado di passarli all'interno di un hash 'options'. Vedi la mia risposta aggiornata. –

+0

Con Ruby 1.9.2 il tuo codice genera un errore di sintassi. Ho dovuto usare <% = link_to 'Q', '#', options: {: "data-original-title" => "Quality",: rel => 'popover',: "data-content" => " Hanno fatto un buon lavoro?

  1. per Really Nice
  2. ...
".html_safe}%> invece. Questo però non funziona. L'HTML generato è: Q Arman

Problemi correlati