Riot.jsで変数の値によってhtmlタグに別のクラス名を付与する方法のメモ

まえおき

分かりにくいタイトルじゃの（笑）

例えばmount時に渡された変数の値を取得したり、ajaxでAPIから何らかのデータを取得し、 その結果の値によってpタグのクラス名を別々に付与したい時ってあると思う。あるよね？ ほいで、それをRiot.jsだとどう書くのか、個人的には3パターンある。これはそのメモ。

※この記事執筆当時のRiot.jsのバージョンは2.4.1です。

書き方

3パターンを大雑把に書くと、こんな感じ。

• 愚直に書く
• 三項演算子を使う
• メソッドにする

例として、変数colorの値がtrue/falseによってクラス名をcolor-light/color-darkとする処理を、 この3パターンで順番に書いていく。

愚直に書く

１つ目。これは{}内でガリガリ書く。この書き方だと長くなって読みづらいけんあまりオススメしない。

以下コード例。

<app>
  <!-- layout -->
  <div id="hoge">
    <ul>
      <li each="{ opts.fuga }">
        <p class="{ 'color-light': (color === true), 'color-dark': (color === false) }">ダミーテキスト</p>
      </li>
    </ul>
  </div>
</app>

理解はしやすいが長い。そしてhtmlが見辛い（というか頭悪い）。夜中にコード書いてて、朝これを見て昨晩の自分を怒りたくなった。┐('～`；)┌ﾔﾚﾔﾚ

三項演算子を使う

２つ目。これはさっきのコードを三項演算子をで書き換えたもの。こっちの方が短くスッキリして、htmlも見やすくなった。

以下コード例。

<app>
  <!-- layout -->
  <div id="hoge">
    <ul>
      <li each="{ opts.fuga }">
        <p class="{ color === true ? 'color-light' : 'color-dark' }">ダミーテキスト</p>
      </li>
    </ul>
  </div>
</app>

一応デモも用意したので参考になれば幸い。→ サンプル

メソッドにする

３つ目。これが一番htmlは見やすいかなと。上記２つの例ではJavaScriptの処理はscriptタグ内ではなく、{}内だったが、 この例ではscriptタグ内で処理している。

以下コード例。

<app>
  <!-- layout -->
  <div id="hoge">
    <ul>
      <li each="{ opts.fuga }">
        <p class="{ classSet(color) }">ダミーテキスト</p>
      </li>
    </ul>
  </div>

  <!-- javascript -->
  <script>
    classSet(val) {
      // ここを三項演算子で書いても良いかな
      if ( val === true )
        return 'class-light';
      else
        return 'class-dark';
    }
  </script>
</app>

余談

好みやコーディング規約にしたがって書き方は分かれるじゃろうな。 それにしても、はてブロのシンタックスハイライトは見辛いな。。。（カラフル過ぎるかと）