レンダー部分でデータを指定しているところがあります。そこを外部ファイルとして読み込むように変更します。ここでは、データを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; }
まとめ
データを別ファイルにすることで、データとロジックを分けることが出来ました。多少大きなデータになっても見通しが良くなるのではないでしょうか。テンプレート部分も別ファイルにすると良いかもしれませんが、今回はコードが短かったので分けませんでした。
