在Slim中处理数据属性的最佳方法

Question

我在个人项目中评估使用Slim替代HAML，发现它处理HTML5数据属性的方式似乎没有HAML那样优雅。我希望有人也遇到过这个问题，或者知道文档中我还没找到的选项/语法。

HAML允许您通过使用嵌套哈希表来定义HTML 5数据属性，如下所示：

%a{data: {key1: 'val', key2: 'val'}}

结果为：

<a data-key1='val' data-key2='val'></a>

- mmoss

Answer 1

Slim 有多种实现方法：

1. 作为哈希

   如果给定一个哈希，则其中的属性将使用连字符表示（例如，data={a:1,b:2} 将呈现为 data-a="1" data-b="2"）

2. 如 "mu is too short" 所述，直接使用非常直观。

a data-title="help" data-content="foo"

使用Ruby编写代码。我经常这样做，很少使用其他语言。

= link_to 'foo', bar_path, data: {a: 'a', b: 'b'}

- Billy Chan

---

太棒了，**#3** 正是我在寻找的。我没有在文档中看到任何描述这个问题的东西，就像 HAML 文档那样。谢谢！ - mmoss

#3 不是 Haml 也不是 Slim，而是 Rails 的辅助方法 :)。它需要翻译成中文吗？ - Billy Chan

请注意，如果您输入a href="#" data={user_name: 'fred', user_id: 1}，它将被翻译成<a href="#" data-user-name="fred" data-user-id="1"></a>。这与Rails无关，因为您可以在Sinatra应用程序中看到其工作情况。 - Dave Sag

请注意，#3 不适用于像 .container, data: { url: "link", value: "stuff" } 这样的直接 div 元素。相反，您必须使用 #2，即 .container[ data-url="link" data-value="stuff" ]。 - ahnbizcad

只是提一下：Slim 真的很漂亮。 - Alexander Presber

Answer 2

使用“splat”操作符：

使用“splat”操作符：

h1#section-title*{'data-url'=>'test', 'data-id'=>'test'} = @project.name

- The Whiz of Oz

Answer 3

.your-class*{data: {first_attribute: 'first value', second_attribute: 'second value'} }

最初的回答会产生以下结果：

<div class="your-class" data-first_attribute="first value" data-second_attribute="second value"></div>

- Slawomir Wdowka

Answer 4

我更喜欢这种方式来解决问题...

@products.each do |product|
  .module data-id=product.id

这对我有效

- Juan José