元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【mustache入門:Ruby版】真偽値(セクション)

セクションという塊を作り、真偽値の値によって表示を出し分けます。

作成するファイル

  • データファイル:data.yml
  • テンプレートファイル:template.mustache

データファイルとテンプレートファイルを以下のように作成します。

#data.yml(データの記述)
id: 1
showId: true
{{! template.mustache(テンプレートの記述) }}
{{#showId}}
- {{id}}
{{/showId}}

{{#xxx}}でセクションを開始し、{{/xxx}}でセクションを終了します。

真偽値による表示の確認

mustacheコマンドを実行して、表示を確認します。

mustache data.yml template.mustache
- 1

真偽値がtrueなので、1と表示されます。ちなみに、showIdをfalseにすると何も表示されません。

真偽値に応じてテンプレートの表示を切り替える

trueの場合とfalseの場合で、表示を切り替える方法を見ていきます。

#data.yml(データの記述)
id: 1
# showId: true
showId: false
{{! template.mustache(テンプレートの記述) }}
{{#showId}}
- {{id}}
{{/showId}}
{{^showId}}
- id not available
{{/showId}}
  • {{#xxx}}~{{/xxx}}
    • trueの場合、この中身が表示される。
  • {{^xxx}}~{{/xxx}}
    • falseの場合、この中身が表示される。

真偽値による表示の切り替えの確認

mustacheコマンドを実行して、表示が切り替わるかを確認します。

mustache data.yml template.mustache
- id not available

今回は真偽値をfalseにしたので、{{^showId}}~{{/showId}}の中身が表示されます。

まとめ

真偽値の値によって表示を出し分ける方法を見てきました。

参考サイト