如何在 Haml 中创建动态 ID？

题

#item

创建一个 id="item" 的 div

.box#item

创建一个 class="box" 和 id="item" 的 div

.box#="item "+x

创建一个带有 class="box" 和注释 '#="item"+x' 的 div

.box#
  ="item"+x

抛出“非法元素：类和 ID 必须有值。”

如何将 id 设置为变量？

解决方案

有两种方式：

长形式的方式（定义ID就好像它是一个常规的属性）：

.box{:id => "item_#{x}"}

这产生（x是有史以来x.to_s评估什么于）：

<div class="box" id="item_x">

在短形式的方法：

.box[x]

产生以下假设x是item的一个实例：

<div class="box item" id="item_45">

请参阅 HAML参考获得更多的信息。

其他提示

您可以设置 id 和 class 在HAML中有以下方式

正常方式

.box.item#item

<div id="item" class="box item"></div>

如果需要插值，可以使用这种格式

.box{id: "item_#{123}", class: "item_#{123}"}

<div id="item_123" class="box item_123"></div>

此格式使用对象引用生成类和 id

# app/controllers/items_controller.rb 
@item = Item.find(123)

.box[@item]

<div id="item_123" class="box item"></div>

如果您需要添加前缀

.box[@item, :custom]

<div id="custom_item_123" class="box custom_item"></div>

如果您需要自定义类和 id 生成，则需要将以下方法添加到模型中。

class CrazyUser < ActiveRecord::Base
  def haml_object_ref
    "customized_item"
  end
end

然后您将获得定制的课程

.box[@item]

<div id="customized_item_123" class="box customized_item"></div>

参考：

许可以下： CC-BY-SA 和归因