※ 2016.11.27 追記
ver3.0.1で修正されたようです。
https://github.com/riot/riot/issues/2082
Riot v2.* で動作していたシンプルなtodoアプリが、v3.0.0 になって動かなくなりました。
下記のコードは、リストの項目をクリックすると完了フラグをセットしてスタイルを更新する定番のtodoアプリです。
<todo>
<ul>
<li each={items} onClick={toggle} class={completed: isCompleted}>{name}</li>
</ul>
<script>
this.items = [
{name: 'task1', isCompleted: false},
{name: 'task2', isCompleted: false},
]
toggle(e) {
console.log(e)
e.preventDefault()
e.item.isCompleted = !e.item.isCompleted
}
</script>
<style scoped>
li.completed {
text-decoration: line-through;
color: #666;
}
</style>
</todo>
class={completed: isCompleted}
は、item.isCompletedがtrueの場合にclass="completed"とレンダリングされるRiotのショートカットです。
動作するサンプル (Riot v2.6.7)
http://plnkr.co/OGrcvQXR10FebdR9PjK7
動作しないサンプル (Riot v3.0.0)
http://plnkr.co/zKfpa1hlEQOWfCwB5ILT
itemsオブジェクトは更新されており、isCompletedがtrueなら再レンダリングされるのですが、falseの時は再レンダリングされずclassが更新されません。
既に報告済み
人生初のオープンソースプロジェクトでのissueを立てようかと思ったのですが、既に上がっていました。
https://github.com/riot/riot/issues/2082
issueにもありますが、
class={ isCompleted ? 'completed' : '' }
のような三項演算子を使っても解決できないようです。
解決策
三項演算子のfalse側に空文字以外を入れると正しくレンダリングされるようです(スペースでも可)。
class={ isCompleted ? 'completed' : ' ' }