Help us understand the problem. What is going on with this article?

riot.jsでattribute経由でoptsに渡されるプロパティ名について

More than 3 years have passed since last update.

以下のようなriotのコードがあったとします。

<!-- マウント先 -->
<div class="main" chain-case='chain' camelCase='camel' snake_case='snake' />

<!-- マウントするタグ -->
<script type="riot/tag">
  <my-tag>
    <h3>Hello { opts.title }</h3>
    console.log(opts);
  </my-tag>
</script>

<script src="https://cdn.jsdelivr.net/riot/2.3/riot+compiler.min.js"></script>

<script>
riot.mount('div.main', 'my-tag', {title: 'World', 'chain-title': 'chain', camelTitle : 'camel', snake_title: 'snake'})
</script>

htmlとして保存しブラウザ上で見てみます。
console.logの出力は以下のようになります。

スクリーンショット 2016-11-21 0.11.13.png

マウントする際にriot.mount()の第三引数に渡されたオブジェクトのプロパティ名は、そのままoptsのプロトタイプチェーンとして受け取れています。

渡したプロパティ名 受け取る際のプロパティ名
chain-title chain-title
camelTitle camelTitle
snake_title snake_title

ところが、マウント先のattributeに指定するとプロパティ名は変換されてしまいます。

渡したattribute名 受け取る際のプロパティ名
chain-case chainCase
camelCase camelcase
snake_case snake_case

スネークケースはそのままですが、
チェインケースはキャメルケースに、
キャメルケースは全小文字に変換されました。

公式ドキュメントにもキャメルケースは全小文字に変換されるよと書かれていますが、その他のケースでも注意が必要です。
http://riotjs.com/guide/#nested-tags

なんだか危険な香りがしますし全部optsで渡したほうが良いんだろうか・・・とも思うのですが、
サーバからriotに変数の中身を受け渡すようなケースだとattributeに埋め込むのが手っ取り早いんですよね。
個人的にjsのプロパティ名はキャメルケースにすることが多いので、attribute名はチェインケースで指定しようかな。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away