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

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

 メニュー

【mustache入門:JS版】データを別ファイル(JSONP)にして読み込む

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

作成するファイル

  • HTMLファイル:index.html
  • JavaScriptファイル:render.js
  • JSONPファイル(データファイル):data.jsonp

ファイルをそれぞれ以下のように作成します。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mustacheの練習</title>
</head>
<body onload="renderHello()">

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

<!-- mustache.js -->
<script src="https://unpkg.com/mustache@latest"></script>
<script src="render.js"></script>
<!-- データの読み込み -->
<script src="data.jsonp"></script>

</body>
</html>

HTMLにJSONPファイルを読み込む部分を追記しました。

/* data.jsonp */
callback({
  "name": "hoge"
});
/* render.js */
var JSON = {};
/* データの読み込み */
var callback = function(json) { JSON = json; }

/* テンプレート */
var template = `Hello {{ name }}!`;

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

データの読み込み部分を追記しました。

JSONPでデータを読み込む

JSONPにするとJSON形式でデータを読み込めるようになります。JavaScriptで以下のように記述して、データを受け取ります。JSONPに関しては、参考サイトをご覧ください。

/* render.js */
var JSON = {};
//データの読み込み
var callback = function(json) { JSON = json; }

まとめ

データを別ファイルにすることで、データとロジックを分けることが出来ました。多少大きなデータになっても見通しが良くなるのではないでしょうか。テンプレート部分も別ファイルにすると良いかもしれませんが、今回はコードが短かったので分けませんでした。

参考サイト