【mustache入門:JS版】コードの整理

前回は、公式サイトのサンプルコードをそのまま利用してmustacheの動作確認をしました。今回は、気になる部分のコードを整理していきたいと思います。

作成するファイル

• HTMLファイル:index.html
• JavaScriptファイル:render.js

テンプレートをJavaScriptに記述するように変更する

前回までのコードはこちらです↓

• mustacheの導入

前回、作成したファイルで気になるところがあるので変更していきます。HTMLの中にスクリプトタグでテンプレートを記述している部分がありますが、違和感があるのでJavaScriptに移動します。つまり、テンプレート部分をJavaScriptに記述するように変更します。

変更前

以下に変更前のHTMLを抜粋します。

<!-- 表示部分 -->
<div id="target">Loading...</div>

<!-- テンプレート -->
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>

変更後

変更後のコードは以下の通りです。

<!-- 表示部分 -->
<div id="target">Loading...</div>

<!-- テンプレート -->
<!--<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script> -->

/* render.js */
/* 追記:テンプレート */
var template = `Hello {{ name }}!`;

/* レンダリングとデータの指定 */
function renderHello() {
  var rendered = Mustache.render(template,  { name: 'hoge' });
  document.getElementById('target').innerHTML = rendered;
}

HTMLにあったテンプレートを無効にして、JavaScriptに定義しました。ブラウザで表示を確認すると「Hello hoge!」と表示されるのが確認できると思います。

まとめ

HTMLの記述が少し気になったので、コードを整理しました。HTMLのコードがすっきりしたのではないでしょうか。今後も読みやすいコードになるように心がけたいです。

こちらのカテゴリもオススメです

• mustache