1

我正在处理的项目需要在表下方的脚注中引用/定义一些数据表的列标题。

由于它是动态内容，将根据需要脚注的列标题的数量进行循环，因此我需要通过模型/助手处理其中的大部分内容。我已经能够复制我们的美国设计师想要使用的 html content_tag，但 rubocop 抱怨内容标签的使用，并说我应该使用它tag。但是我无法使用该tag方法让 html 标签的嵌套工作。

我正在尝试生成的 html 部分是这样的（将在需要脚注时重复）：

<li id="id" class="p-2">
  <dl class="m-0"><dt class="d-inline">Unusual term: </dt>
    <dd class="d-inline">Text with the definition of the term.<a href="#id-ref" aria-label="Back to content">↵&lt;/a></dd>
  </dl>
</li>

生成它的content_tag基础代码是这样的：

content_tag(:li,
  content_tag(:dl, [
    content_tag(:dt, 'Unusual term: ', class: "d-inline"),
    content_tag(:dd, [
      'Text with the definition of the term.',
      content_tag(:a, '↵', href: '#id-ref', aria: { label: "Back to content" })
    ].join.html_safe, class: "d-inline")
  ].join.html_safe, class: "m-0"),
id: 'id',
class: "p-2")

当我切换到 usingtag时，我遇到的问题是将两者都具有 content<dt>的和<dd>标签嵌套在标签内（以及同样具有内容的标签嵌套在上述标签内）。该方法似乎只输出最后一段嵌套内容，并忽略它之前的任何其他内容。<dl><a><dd>tag

这是我尝试过的标记方法的嵌套：

tag.li id: 'id', class: 'p-2' do
  tag.dl class: 'm-0' do
    (tag.dt 'Unusual term: ', class: 'd-inline') +
      (tag.dd 'Text with the definition of the term.', class: 'd-inline' do
        (tag.a arrow, href: anchor, aria: { label: 'Back to content' })
      end)
  end
end

这就是它给我的输出。

<li id="id" class="p-2">
  <dl class="m-0"><dt class="d-inline">Unusual term: </dt>
    <dd class="d-inline"><a href="#id-ref" aria-label="Back to content">↵&lt;/a></dd>
  </dl>
</li>

如您所见，它很接近，但缺少<dd>标签的文本内容，该内容应该在<a>标签开始之前输出。

任何人都可以帮忙吗？有没有办法在不丢失内容的情况下嵌套标签？或者我应该放弃并用写出的实际html代码写一个部分......？

4

3 回答 3

0

我现在已经找到了一种方法来嵌套这些标记方法以实现所需的 html 输出，使用以下代码：

link = link_to ' ↵', '#id-ref', aria: { label: 'Back to content' }

tag.li(id: 'id', class: 'p-2') do
  tag.dl(class: 'm-0') do
    (tag.dt 'Unusual term: ', class: 'd-inline') +
      (tag.dd ('Text with the definition of the term.' + link).html_safe, class: 'd-inline')
  end
end

如果有人有替代解决方案，我很想听听，但我认为这暂时有用。

编辑以添加新的解决方案

感谢@max 建议concat用来摆脱我，#html_safe我现在有一段代码，我、我的 ux 设计师和 rubocop 都会对它感到满意！这里是：

tag.li(id: 'id', class: 'p-2') do
  tag.dl(class: 'm-0') do
    tag.dt('Unusual term:', class: 'd-inline') + ' ' +
    tag.dd(class: 'd-inline') do
      concat 'Text with the definition of the term.'
      concat tag.a(' ↵', href: '#id-ref', aria: { label: 'Back to content' })
    end
  end
end

再次感谢大家对我的问题的意见。对此，我真的非常感激。

于 2021-05-07T17:06:34.270 回答
0 
tag.li(id: 'id', class: 'p-2') do
  tag.dl(class: 'm-0') do
    concat tag.dt('Unusual term: ', class: 'd-inline')
    concat tag.dd(class: 'd-inline') do
       concat 'Text with the definition of the term. '
       concat tag.a(arrow, href: anchor, aria: { label: 'Back to content' })
    end
  end
end

每个content_tag或tag都有自己的字符串缓冲区 - 通过使用concat您输出到该字符串缓冲区。这使您可以在块中多次输出，而无需处理字符串连接和#html_safe. 此字符串缓冲区是 的返回值content_tag/tag。

无论您使用的是content_tag还是，这确实有效tag。

看：

于 2021-05-07T18:00:12.183 回答
0

在我看来，它content_tag是tagrails 6.1.3.1 的一部分。看起来只有被弃用的是tag默认为 XHMTL 空标记而不是 HTML 5 类型标记的帮助程序格式。有报告称 rubocop 的目标行为不正确，content_tag而tag应该将其作为目标。

您可以检查content_tag空标签的参数，因为它可能不像以前那样默认。

于 2021-05-07T14:56:29.077 回答