"if condition then <a> else <span>" 缩进 oops in slim

Indentation oops with "if condition then <a> else <span>" in slim

我必须根据条件渲染 an 或 a,但是,slim 的缩进和 "no explicit end allowed" 妨碍了我。

在这个简化的代码中,我想根据产品是否可用将具有三个 DIV 的产品包装在 A 或 SPAN 中。


- if available?
  a href=...
- else
  span class="unavailable"
.currency = @product.currency
.price = @product.price
.description = @product.description

以上显然行不通,因为产品不是在 A 或 SPAN 内呈现,而是在其旁边呈现。


- if available?
  a href=...
- else
  span class="unavailable"
  .currency = @product.currency
  .price = @product.price
  .description = @product.description

这种情况更糟,因为 slim 将产品视为 "else" 情况的一部分,并在 SPAN 旁边呈现产品,而根本不呈现 A。


- if available?
  a href=...
- else
  span class="unavailable"
    .currency = @product.currency
    .price = @product.price
    .description = @product.description

这里的 SPAN 一切正常,但 A 仍然是空的,因为产品被视为 "else" 案例的一部分。


- if available?
  a href=...
- else
  span class="unavailable"
- end
  .currency = @product.currency
  .price = @product.price
  .description = @product.description

现在,这可能是正确的,但 slim 不允许显式 "end" 因此会引发异常。

知道如何让它工作吗?

PS:也许 slim 应该允许明确 "end" 像这样的边缘情况。

这是我想出的解决方法:

使用 capturing to local variables 将 children 保存在局部变量中:

= capture_to_local children=:children
  .currency = @product.currency
  .price = @product.price
  .description = @product.description

现在您可以运行

- if available?
  a href=...
    = children
- else
  span class="unavailable"
    = children

我没有 slim 设置,只是用 haml 试了一下,但效果应该一样:)