ruby-on-rails - 如何用haml和rails做数据属性？

Question

我可以有

%a{href: '#', data_toggle_description_length: 'toggle_me_ajax'}

它给我的下划线不是破折号，即

<a href="#" data_toggle_description_length="toggle_me_ajax"></a>

但是我想拥有HTML5 data-属性，即

<a href="#" data-toggle-description-length="toggle_me_ajax"></a>

但是当我尝试用破折号替换下划线时，即

%a{href: '#', data-toggle-description-length: 'toggle_me_ajax'}

我收到语法错误：

/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected tLABEL
...data-toggle-description-length: 'toggle_me_ajax')}>\n    tog...
...                               ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected ')', expecting '}'
...ption-length: 'toggle_me_ajax')}>\n    toggleMeAjax\n  </a>\...
...                               ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: unknown regexp options - pa
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected $undefined
... toggleMeAjax\n  </a>\n</span>\n", -1, false);::Haml::Util.h...
...                               ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: unterminated string meets end of file
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected $end, expecting '}'

Answer 1

尝试这个：

%a{"data-toggle-description-length" => "toggle_me_ajax", href: "#"}

或者

%a{href: "#", :data => {:toggle_description_length => "toggle_me_ajax"}}

有关更多详细信息，请参阅此处

您还可以使用在线提供的 html2haml 转换器

编辑：

正如评论中提到的，还有更多的语法可以使用

 %a{href: "#", { "data-toggle-description-length": "toggle_me_ajax" }}

或者

%a{href: "#", { :"data-toggle-description-length" => "toggle_me_ajax" }}

我仍然更喜欢前两个，因为我认为后两个看起来丑陋而且有点凌乱。

Answer 2

在haml中真的没有太多需要使用{ ... }样式。HTML 样式属性是一种更灵活、更自然的 html 生成方式。

%a(href="#" data-toggle="target") my link

不需要逗号、哈希火箭等。您还可以非常轻松地插入或直接分配变量，而无需切换样式。

例如

%a(href=link data-toggle="#{id}-toggle")

Wherelink和id是当前绑定范围的变量。

值得注意的是，您还可以无缝地包含来自 xmlns 的属性，svg 生成使用很多命名空间前缀，例如：

%link(xlink:type="simple" xlink:href=link)

没有令人信服的理由使用另一种风格。

Answer 3

像这样的东西应该工作得很好：

%a{ "data-user-id" => "#{@user.id}" }