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

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

 メニュー

【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)

まとめ

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

参考サイト