以前、mustacheの記事を書きましたが、勉強し直したので改めて記事にします。今回は、HTMLとJavaScriptの分離に焦点を当てて書きます。 HTMLを挿入する例 HTMLのテンプレート化 HTMLコードの分離 まとめ 参考 HTMLを挿入する例 id属性がresultである要素の子…

当ブログで紹介したmustacheの記事を一覧にまとめました。 そもそもmustacheに出会ったのは、Vue.jsの勉強時でした。知らないことでしたので、これを機に勉強しました。 mustacheの記事まとめ mustache入門:Ruby版 mustache入門:JavaScript版 参考サイト mus…

レンダー部分でデータを指定しているところがあります。そこを外部ファイルとして読み込むように変更します。ここでは、データをJSONPファイルとして用意します。 作成するファイル JSONPでデータを読み込む まとめ 参考サイト 作成するファイル HTMLファイ…

前回は、公式サイトのサンプルコードをそのまま利用してmustacheの動作確認をしました。今回は、気になる部分のコードを整理していきたいと思います。 作成するファイル テンプレートをJavaScriptに記述するように変更する 変更前 変更後 まとめ 作成するフ…

mustacheの導入について書きます。mustacheは、テンプレートエンジンです。色々な言語で利用できるということなので、一度学習しておくと他でも使えるので勉強しておくに越したことはないと思います。今回は、JavaScriptでmustacheを勉強します。 公式サイト…

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

データがある限り一覧表示する方法を見ていきます。 作成するファイル 複雑なデータの埋め込みの確認 まとめ 参考サイト 作成するファイル データファイル:data.yml テンプレートファイル:template.mustache データファイルとテンプレートファイルを以下のよ…

セクションという塊を作り、真偽値の値によって表示を出し分けます。 作成するファイル 真偽値による表示の確認 真偽値に応じてテンプレートの表示を切り替える 真偽値による表示の切り替えの確認 まとめ 参考サイト 作成するファイル データファイル:data.y…

区切り記号を{{}}から他のものに変更する方法を見ていきます。 作成するファイル 区切り記号の変更 区切り記号変更の確認 まとめ 参考サイト 作成するファイル データファイル:data.yml テンプレートファイル:template.mustache データファイルとテンプレー…

テンプレートにHTMLタグを埋め込む方法を見ていきます。少し注意が必要なので、そちらも合わせて書きます。 作成するファイル HTMLタグの埋め込み HTMLタグの埋め込みの確認 まとめ 参考サイト 作成するファイル データファイル:data.yml テンプレートファイ…

mustacheの基本的な記述を見ていきます。まず、データファイルとテンプレートファイルを用意します。データファイルにデータを、テンプレートファイルにテンプレートを記述します。mustacheコマンドでデータがテンプレートに埋め込まれることを確認します。 …

mustacheの導入について書きます。mustacheは、テンプレートエンジンです。色々な言語で利用できるということなので、一度学習しておくと他でも使えるので勉強しておくに越したことはないと思います。今回は、Rubyのmustacheパッケージを使って勉強します。 …