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

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【mustache入門:Ruby版】テンプレートファイルの部品化(partials)

テンプレートファイルの中身が多くなるとコードの見通しが悪くなります。そこでテンプレートの一部分を部品化して、別ファイルに切り出す方法を見ていきます。

作成するファイル

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

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

#data.yml(データの記述)
users:
  - name: hoge
    email: hoge@example.com
  - name: fuga
    email: fuga@example.com
{{! template.mustache(テンプレートの記述) }}
{{#users}}
- {{name}} ({{email}})
{{/users}}
{{^users}}
- no user found.
{{/users}}

テンプレートの部品化

template.mustacheの- {{name}} ({{email}})の部分を別ファイルに切り出します。ファイル名は、user.mustacheとします。

{{! user.mustache(テンプレートの記述) }}
- {{name}} ({{email}})

template.mustacheの切り出した部分を{{> user}}に置き換えます。

{{! template.mustache(テンプレートの記述) }}
{{#users}}
{{> user}}
{{/users}}
{{^users}}
- no user found.
{{/users}}

部品化の確認

mustacheコマンドを実行して、切り出し前と同じ結果になることを確認します。

mustache data.yml template.mustache
- hoge (hoge@example.com)
- fuga (fuga@example.com)

まとめ

テンプレートファイルの一部分を部品化することに成功しました。これで色々なファイルに部品を読み込んで、再利用できるようになりました。

参考サイト

» HTML入門のまとめはこちらです。