Edited at

Riot.jsでeach属性を使っていろんな配列を表示する(追記あり)

More than 1 year has passed since last update.


はじめに

Riot.jsではeach属性を使って簡単にループ処理を書けるのですが、地味にこけるポイントだと思いますので書きました。現時点のRiot.jsの最新バージョンは2.4.1です。


まずは単純な配列でeach

何はともあれコードを見ましょう。


simple_array.tag

<app>

<!-- layout -->
<ul>
<li each="{ key in tasks }">{ key }</li>
</ul>

<!-- javascript -->
<script>
this.tasks = ['hoge','fuga','piyo'];
<script>
</app>


結果は以下です。

// hoge

// fuga
// piyo

何の変哲もなく、ただの文字列配列をeachで出力しているだけですね。ちなみにeach={ tasks }と書くと、何も出力されません。


キー無しのオブジェクト配列でeach

そもそもこの呼び方が正しいのか否かは目を瞑っていただいて、先程よりちょっと中身が複雑な配列の場合のコードを見てみましょう。


object_array.tag

<app>

<!-- layout -->
<ul>
<li each="{ tasks }">{ body }</li>
</ul>

<!-- javascript -->
<script>
this.tasks = [
{'body': 'hoge'},
{'body': 'fuga'},
{'body': 'piyo'}
];
</script>
</app>


結果は以下です。

// hoge

// fuga
// piyo

今度は配列の要素それぞれがオブジェクトになっており、それぞれのキーはbodyで統一されています。値を出力する際は{ キー }を指定すれば表示されます。

上記のlayout部分を以下のように書くと、各オブジェクトのインデックスも表示できます。


object_array.tag

<!-- layout -->

<ul>
<!-- ここの 'task' と 'i' の順番が重要! -->
<li each="{ task, i in tasks }">{ i }: { task.body }</li>
</ul>

結果は以下です。

// 0: hoge

// 1: fuga
// 2: piyo


キー有りのオブジェクト配列の場合

ある意味これが本題です。ここでコケました。


object_array.tag(キー有り)

<app>

<!-- layout -->
<ul>
<li each="{ task, key in tasks }">{ key }: { task.body }</li>
</ul>

<!-- javascript -->
<script>
this.tasks = {
'a': {'body': 'hoge'},
'b': {'body': 'fuga'},
'c': {'body': 'piyo'}
};
</script>
</app>


結果は以下です!

// [object Object]:

// [object Object]:
// [object Object]:

はい。キー無しのオブジェクト配列と同じように記述すると、思ったように値を表示できないんですよ。。。これを期待通りに表示するには、layout部分のkeytaskを先ほどとは逆に書きます。


object_array.tag(修正版)

<!-- layout -->

<ul>
<!-- 'task' と 'key' の順番がさっきとは逆! -->
<li each="{ key, task in tasks }">{ key }: { task.body }</li>
</ul>

もちろん結果は以下です。

// a: hoge

// b: fuga
// c: piyo


2016/12/08 追記

上記はv3にて修正され、反転しなくても良くなりました。

 

ループのネストについては別の方が記事を書いてくださっているので、そちらを参照ください。(「参考」の二つ目の記事です)

※ もう一つ注意点として、eachの中でopts変数の中身を展開しようとするとできないので気をつけてください!


おわりに(読まなくてもいいです)

eachでループについての投稿記事って案外なくて書きましたが、知っている方からしたら常識かもしれませんが、このレベルの記事もないくらい、まだまだRiot.jsって使われてないんですかね。もっと皆さんに使っていただきたいと思う今日このごろです。


参考