背景
riotのカスタムタグに連想配列をjsonで渡そうとした時に起きた現象。
ドツボに嵌ったので共有
環境
- MacOs High Sierra
- php 7.1.14
- laravel5.5.40（今回多分関係ない）
- riotjs3.10.3
どういった現象か
$array = ['name' => 'John', 'age' => 24];
この配列を
member.html
<member status='<?= json_encode($array) ?>'></member> //riotタグ
といった風にjsonに変換してriotタグに渡してやる
member.tag
<member>
<script>
console.log(this.opts.status)
</script>
</member>
console.logでパラメータを確認すると
name age
と出力される
どこにいったvalue?
連想配列のキーだけになっている。なんで？
こんな感じになってほしいのだが・・・
{name: "John", age: 24}
age:24
name:"John"
原因
公式に答えがありました。
クラス省略記法
RiotはCSSクラス名について特別な文法をもっています。例えば、<p class={ foo: true, bar: 0, baz: new Date(), zorro: 'a value' }></p>は、”foo baz zorro”として評価されます。
クラス省略記法として解釈されていたんですね。（なんでかはソース読めばいいんでしょうが、別の機会に）
回避方法
json_encodeされたものを、さらに中括弧でくくってやると、クラス省略記法としては解釈されないみたいです。
member.html
<member status='<?= "{" . json_encode($array) . "}" ?>'></member> //riotタグ
流石に不恰好なので、こんな感じのヘルパー関数を作成して、
if (!function_exists('json_encode_for_riot')) {
/**
* @param $mixed mixed 配列もしくはCollection
* @return string
*/
function json_encode_for_riot($mixed): string
{
return '{' . json_encode($mixed) . '}';
}
}
使えば、まあ、良いかも
member.html
<member status='{{ json_encode_for_riot($array) }}'></member> //riotタグ
他にエレガントな回避方法ないんですかね・・・。
参考（というか答え）
最初はよくわからなかったのですが、最終的にはおそらく同じ現象だと理解できました。
ありがとうございます。