使用 span 和图标在 haml 中为 table headers 获取相同的输出顺序

Question

我试图让每个文件的表中的标题都相同，但是我运行遇到了问题，因为它不喜欢 haml，因此不起作用。

我的代码如下所示，您可以在其中看到 3 个不同的标题，并且您可以看到它们各不相同 style/layout，因此它们呈现不同...

main.haml:

- import "_macs.haml" as mac
%tr
  %th
    %span{"data-title": "Title tip"} Title 1
    = mac.doaction("sort_action1", is_sortable, "asc")

  %th
    = mac.doaction("sort_action2", is_sortable, "asc")
    %span Title 2

  %th
    Title 3
    = mac.doaction("sort_action3", is_sortable, "asc")

我忽略了下面示例中 I 标签的实际内容

第一个标题呈现如下：

<th>
  <span data-title="Title tip">Title 1</span>
  <i></i>
</th>

第二个标题呈现如下：

<th>
  Title 2
  <i></i> 
</th>

第三个标题呈现如下：

<th>
  <i></i> 
  <span>Title 3</span>
</th>

期望的输出

我希望能够使它们全部显示如下，其中 I 标签位于跨度上方。

<th>
  <i></i>
  <span data-title="Title tip">Title 4</span>
</th>

和

<th>
  </i></i>
  <span>Title 4</span>
</th>

_macs.haml:

下面的内容不重要，但我们想保留这个宏。

- macro doaction(column, is_sortable, default_dir)
  -if is_sortable
    %i.icon{'class': 'sortable', 'data-column': '#{column}', 'data-title': 'Sort', 'data-default-dir': '#{default_dir}'}
-endmacro

Answer 1

试试这个：

- import "_macs.haml" as mac
%tr
  %th
    = mac.doaction("sort_action1", is_sortable, "asc")
    %span{"data-title": "Title tip"} Title 1


  %th
    = mac.doaction("sort_action2", is_sortable, "asc")
    %span{"data-title": "Title tip"} Title 2

  %th
    = mac.doaction("sort_action3", is_sortable, "asc")
    %span{"data-title": "Title tip"} Title 3

使用 span 和图标在 haml 中为 table headers 获取相同的输出顺序

Getting the same output order in haml for table headers with spans and icons

html

haml

main.haml:

期望的输出

_macs.haml: