在bootstrap popover rails 5 app中渲染部分?

时间:2018-06-06 11:21:49

标签: javascript html ruby-on-rails bootstrap-popover html-safe

我在我的rails应用程序中在引导程序弹出窗口中呈现部分问题。

部分始终呈现为纯文本(显示所有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
});

这是_e1.html.erb文件夹

中的envs部分
<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>

我已在"<%= render :partial => 'envs/e1' %>"raw()中包含html_safe这一行而没有任何运气。

*添加示例* 以下是我在剪辑

中使用html_saferaw的示例

data-content= raw("<%= render :partial => 'envs/e1' %>") - 文字以“正确”方式显示,但在弹出窗口外显示。

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 %>" - 文字显示为纯文字

必须有一些方法让部分样式在popover内? 或者我这样做是错的吗?

请告诉我 提前谢谢。

3 个答案:

答案 0 :(得分:3)

我相信你必须在你的popover范围内启用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' %>" >

答案 1 :(得分:0)

默认情况下,Bootstrap弹出窗口不会接受通过自动继承选项输入的html:data-html="false"您需要添加并将其更改为true

如果您想了解更多关于可以传递给引导程序弹出窗口的选项的信息,请查看this section of their API,然后您可以查看可以使用它做什么。

答案 2 :(得分:0)

您的Bootstrap标记和JS看起来很好,所以几乎可以肯定的是,您的视图输出的是转义的HTML而不是您需要的标记。

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

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

请注意,html_safe应用于render的输出,外引号保留在HTML中,不由Rails解释。