riot.js classのon off

vueのようにfalsyを判定しclassのon,offが出来る。

class="{isRed:item,isGreen:!item}"

ただ状態が多数あった場合には記述が複雑になるためclassList.addに頼ることになる。

全部

<script src="//gnjo.github.io/riot.js"></script>
<t></t>

<style>
b{font-weight:normal;font-size:14px;width:14px;height:14px;
display:inline-block;line-height:1;
border:1px solid transparent;
}
.isRed{background-image:url('https://icongr.am/clarity/times.svg?size=14&color=ff0000')}
.isGreen{background-image:url('https://icongr.am/clarity/check.svg?size=14&color=aaaaaa')}
b:hover{border:1px solid;}
[box]{font-size:0} 
</style>

riot.tag(
`t`,`<div box><b each="{item in items}" class="{isRed:item,isGreen:!item}"></b></div>`
,function(opts){
 this.items=opts;
});

let data=Array.from({length:300}).map(d=>Math.round(Math.random()));
riot.mount('t',data)