Riot.jsでタグのclassやonclickを動的に変更する方法

結論

出力する部分をriot関数化しておけばおけ。

追記(2017/10/17 17:44)

単純な場合はclass={つけたいクラス名:真偽値}みたいな感じでいけます。
tempakyousuke さん感謝!

事情

Riot.jsでpaginationを実装していたときに、現在表示している部分だけ表示を切り替えたかった。が、うまくいかなかった。
classの指定を動的に切り替える方法が調べてもすぐ出てこなかったのでまとめ。

説明

<base_list>
 <ul class="pagination">
  <li each={page in pages} class="page-item">
   <a class="page-link" href="#" onclick="">
    {page[0]}
   </a>
  </li>
 </ul>
</base_list>

var self = this;

function paging(url){
 if(url == null){return;}
 get_data(url, function(data){
  self.start = data.offset + 1;
  self.pages = data.pages;
  self.update();
 });
}

上は作成したriot tagのpagination部分の抜粋。現在表示されているリスト部分を図のように青くしたかった。上のコードでは当然のように表示されている部分が青くなったりはしない。
pagesの中にリスト表示位置の最初の数字とURLのタプルからなる配列が格納されている。

最初はjsonでデータをうけとったタイミングでループを回して文字列やJS関数として展開していたのだが、評価タイミングの問題などでうまくいかなかった。
showやif等も使ってみたがうまくいかないので、最終的に下記のようにして解決した。

<base_list>
 <ul class="pagination">
  <li each={page in pages} class="page-item{get_paging_link_class(page[0])}">
   <a class="page-link" href="#" onclick={get_paging(page[1])}>
    {page[0]}
   </a>
  </li>
 </ul>
</base_list>

var self = this;

function paging(url){
 if(url == null){return;}
 get_data(url, function(data){
  self.start = data.offset + 1;
  self.pages = data.pages;
  self.update();
 });
}
get_paging_link_class(start){
 if(start == self.start){return " active";}
 return "";
}
get_paging(url){
 return function(e){paging(url);}
}