web-dev-qa-db-ja.com

Slimでデータ属性を処理する最良の方法

私はSlimを[〜＃〜] haml [〜＃〜]個人プロジェクトでは、HAMLほど優雅にHTML5データ属性を処理するようには見えません。誰かがこれに出くわしたり、ドキュメントでまだ見つけていないオプション/構文について知っているかもしれないと期待していました。

HAMLでは、次のようにネストされたハッシュを使用するだけで HTML 5データ属性 を定義できます。

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

その結果

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

ruby-on-railsrubyhamltemplatingslim-lang
51
mmoss

Slimには複数の方法があります

  1. ハッシュとして

    ハッシュが指定された場合にハイフネーションされる属性（例：data = {a：1、b：2}はdata-a = "1" data-b = "2"としてレンダリングされます）

  2. 「muが短すぎます」と述べたように、直観的に使用してください。

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

  3. Rubyコードを使用します。私はこれを頻繁に行い、めったに上記を行いません。

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

splat演算子を使用します。

h1#section-title*{'data-url'=>'test', 'data-id'=>'test'} = @project.name
2
The Whiz of Oz
.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>
0
Slawomir Wdowka

私はこの種の修正を好む...

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

それは私のために働いています

0
Juan José