カスタムデータ属性ちょっと復習

htmlにカスタムデータ属性を設定を指定しておくとJavaScriptで値を取得できる。

属性名をdata-で始まる名称にすることで設定できる。値入れるのには=を使う

data-任意の名前 = 任意の値

jQueryだと取得したDOMにdataメソッドを利用することでデータを取得できる

<section id="blog" data-author="Taro" data-create-date="2013-04-10">
       <h1>Hello World!</h1>
       <p>This is a sample text.</p>
     </section>

 という風に設定した場合は

　　　<script>
       var blog = $("#blog");
 　　   //jQueryでカスタムデータ属性の値を取得
       alert("author : " + blog.data('author'));
       alert("create date : " + blog.data('create-date'));
     </script>

という具合で取得できる

hamlで書くと

%div{data: {message: {id: '1'}}}
# 上記の記述で、以下のようにカスタムデータ属性が反映される
# → <div data-message-id='1'>

具体的にすると

.message{data: {message: {id: message.id}}}

といった使い方になる

参考記事↓読んだ方がいい

https://www.webprofessional.jp/how-why-use-html5-custom-data-attributes/