在 bootstrap 弹出窗口 rails 5 应用程序中呈现部分内容？

Question

我在 rails 应用程序的 bootstrap 弹出窗口中呈现部分内容时遇到问题。

部分始终呈现为纯文本（显示所有 HTML 标签等）。

这是来自 index.html.erb

的代码

<span class="has-popover"
      style="cursor:pointer;"
      data-toggle="popover"
      data-trigger="hover"
      data-container="body"
      data-placement="right"
      title="Lorem Ipsum"
      data-content= "<%= render :partial => 'envs/e1' %>" >
      <i class="fa fa-question-circle "  aria-hidden="true"></i>
</span>

在 app.js 我有这个片段

$(".has-popover").popover({
    html : true
});

这是 envs 文件夹中的 _e1.html.erb 部分

<h2>Mauris euismod sollicitudin?</h2>

<p>Morbi sit amet tellus pellentesque, maximus eros a, aliquam nunc. Vivamus velit velit, vestibulum at eros eu, iaculis hendrerit tortor. Morbi ullamcorper purus at ornare ullamcorper. </p>

<br>

<p>Morbi sit amet tellus pellentesque, maximus eros a, aliquam nunc. Vivamus velit velit, vestibulum at eros eu, iaculis hendrerit tortor. Morbi ullamcorper purus at ornare ullamcorper. </p>

我在 raw() 和 html_safe 中都包裹了 "<%= render :partial => 'envs/e1' %>" 这一行，但没有任何运气。

* 添加示例 * 下面是我如何在 snipped

中使用 html_safe 和 raw 的示例

data-content= raw("<%= render :partial => 'envs/e1' %>") - 文本以 "right" 的方式出现，但在弹出框之外。

data-content= "<%= raw(render :partial => 'envs/e1') %>" > - 文本显示为纯文本

data-content= "<%= render :partial => raw('envs/e1') %>" > - 文本显示为纯文本

data-content= "<%= render :partial => 'envs/e1' %>".html_safe- 文本显示为纯文本

data-content= "<%= render :partial => 'envs/e1'.html_safe %>" - 文本显示为纯文本

一定有什么方法可以在弹出框内设置局部样式？？还是我做错了？

请多多指教提前致谢。

Answer 1

我认为您必须在弹出窗口范围内启用 data-html = "true"。至少它在我的机器上有效。

所以应该这样写：

<span class="has-popover"
  style="cursor:pointer;"
  data-toggle="popover"
  data-trigger="hover"
  data-html="true" <!-- This is what you have to add to the code -->
  data-container="body"
  data-placement="right"
  title="Lorem Ipsum"
  data-content= "<%= render :partial => 'envs/e1' %>" >

Answer 2

默认情况下，Bootstrap弹出框不接受html输入，自动继承选项：data-html="false"需要添加修改为true .

如果您想详细了解可以传递给 bootstrap 弹出窗口的选项，请查看 this section of their API 并查看您可以用它做什么。

Answer 3

您的 Bootstrap 标记和 JS 看起来不错，所以问题几乎可以肯定是您的视图正在输出转义 HTML 而不是您需要的标记。

您对 html_safe 的尝试非常接近并且肯定是在正确的轨道上，但是缺少括号意味着它并没有完全按照您的想法进行。试试这个：

data-content="<%= render(partial: 'envs/e1').html_safe %>"

请注意，html_safe 应用于 render 的输出，并且外部引号保留在 HTML 中并且不被 Rails 解释。

在 bootstrap 弹出窗口 rails 5 应用程序中呈现部分内容？

Rendering partial in bootstrap popover rails 5 app?

html

javascript

ruby-on-rails

html-safe

bootstrap-popover