如何在Haml中创建动态id?

79
#item

创建一个带有id="item"的div元素

.box#item

创建一个类名为"box",id为"item"的div元素。

.box#="item "+x
创建一个class为"box"的div,并且添加注释'#="item"+x'。
.box#
  ="item"+x

抛出异常:"非法元素:类和id必须有值。"

如何将id设置为变量?

2个回答

139

有两种方法:

第一种是长形式(将id定义为常规属性):

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

生成以下内容(x是任何x.to_s求值的结果):

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

简写方式:

.box[x]

假设xitem类的实例,那么产生以下结果:

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

查看HAML参考文档以获取更多信息。


2
我必须去掉空格才能使其正常工作:.box{:id => "item_#{x}"} - jethroo
你如何在快捷方法中将字符串和字符串转换后的变量连接起来?我尝试使用 .box["item" + s] 和其他变体,但都没有成功。这种只使用方括号的简写方式仅适用于变量吗? - ahnbizcad
1
@gwho,快捷方式需要x是item的一个实例。使用长形式字符串插值形式来实现你想要的效果。.box {:id =>“item#{s}”} - EmFi

11
你可以通过以下方式在HAML中设置idclass

  1. 正常的方式

    .box.item#item
    
    <div id="item" class="box item"></div>
    
  2. 如果需要进行插值,可以使用以下格式

  3. .box{id: "item_#{123}", class: "item_#{123}"}
    
    <div id="item_123" class="box item_123"></div>
    
  4. 这种格式使用对象引用生成类名和id

  5. # app/controllers/items_controller.rb 
    @item = Item.find(123)
    
    .box[@item]
    
    <div id="item_123" class="box item"></div>
    
  6. 如果您需要给某些东西添加前缀

  7. .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>
    

参考:


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接