在 Slim 中处理数据属性的最佳方法
Posted
技术标签:
【中文标题】在 Slim 中处理数据属性的最佳方法【英文标题】：Best way to handle data attributes in Slim 【发布时间】：2013-09-27 16:28:15 【问题描述】：我在个人项目中评估 Slim 作为 HAML 的替代品，但它似乎不像 HAML 那样优雅地处理 html5 数据属性。我希望有人可能也遇到过这种情况，或者可能知道我在他们的文档中还没有找到的选项/语法。
HAML 允许您简单地使用嵌套散列定义HTML 5 data attributes，如下所示：
%adata: key1: 'val', key2: 'val'
导致
<a data-key1='val' data-key2='val'></a>
【问题讨论】：
【参考方案1】：Slim 有多种方式
作为哈希
如果给出 Hash，属性将被连字符（例如 data=a:1,b:2 将呈现为 data-a="1" data-b="2"）
如“mu太短”所说直接使用，相当直观。
a data-title="help" data-content="foo"
使用 Ruby 代码。我经常这样做，很少超过。
= link_to 'foo', bar_path, data: a: 'a', b: 'b'
【讨论】：
太棒了，#3 正是我想要的。我没有看到像 HAML 文档那样描述这种情况的文档中出现任何内容。谢谢！ moss，#3 既不是 Haml 也不是 Slim，而是 Rails 助手 :) 请注意，如果您使用a href="#" data=user_name: 'fred', user_id: 1，它会将其转换为 <a href="#" data-user-name="fred" data-user-id="1"></a> - 这与 Rails 无关，因为您会看到它在 Sinatra 应用程序中也能正常工作。
请注意，#3 不适用于像 .container, data: url: "link", value: "stuff" 这样的直接 div 元素，而必须使用 #2，例如 .container[ data-url="link data-value="stuff" ]
顺便提一下：Slim 真的很漂亮。【参考方案2】：
使用 splat 运算符：
h1#section-title*'data-url'=>'test', 'data-id'=>'test' = @project.name
【讨论】：
【参考方案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>
【讨论】：
【参考方案4】：我更喜欢这种修复...
@products.each do |product|
.module data-id=product.id
它对我有用
【讨论】：
以上是关于在 Slim 中处理数据属性的最佳方法的主要内容，如果未能解决你的问题，请参考以下文章