web-dev-qa-db-ja.com

hamlとrailsでデータ属性を行う方法は？

私は持てます

%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 '}'
ruby-on-railsruby-on-rails-3hamlcustom-data-attributehtml5-data
27
Michael Durrant

これを試して：

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

[〜＃〜] or [〜＃〜]

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

詳細については、 こちら を参照してください

また、html2haml converter （をオンラインで使用することもできます

編集：

コメントで述べたように、さらに機能する構文がいくつかあります

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

OR

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

私はまだ最初の2つを好むが、後者のものはくてちょっと乱雑に見えると思う。

57
Mandeep

Hamlで{ ... }スタイルを使用する必要はほとんどありません。 HTMLスタイル属性は、HTML生成のためのより柔軟で自然な方法です。

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

カンマやハッシュロケットなどは必要ありません。また、スタイルを切り替えずに変数を非常に簡単に補間したり、直接割り当てたりすることもできます。

例えば.

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

linkとidは、現在バインドされているスコープの変数です。

特に、xmlnsから属性をシームレスに含めることもできます。svg生成では、たとえば次のような多くの名前空間プレフィックスを使用します。

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

別のスタイルを使用する説得力のある理由はありません。

7
ocodo