使用したもの(環境)
- cordova
- visualStudioCode
- windows10
- Android
チュートリアルを訳しながらやってみる
チュートリアルのページは下記。
Module 8: Using Handlebars Templates
前回のチュートリアル。
環境構築については別途まとめてあるので下記参照。
cordova&VSCodeで環境を構築するまでの右往左往メモ。
Module 8: Using Handlebars Templates
Writing HTML fragments in JavaScript and programmatically inserting them into the DOM is tedious.
JavaScriptでHTML要素を書き、DOMの中へそれらの要素をプログラム的に挿入することは、長ったらしくてやたらめんどくさいです。
It makes your application harder to write and harder to maintain.
アプリケーションを書くのが難しくなり、メンテナンスが難しくなります。
HTML templates address this issue by decoupling the UI definition (HTML markup) from your code.
HTMLテンプレートはこの問題をあなたのコードからUI定義(HTML markup)を分離させることで処理します。
There are a number of great HTML template solutions, including Mustache.js, Handlebars.js, and Underscore.js to name a few.
幾つか挙げると、Mustache.js, Handlebars.js, そして Underscore.jsなどの、多数の素晴らしいHTMLテンプレートソリューションがあります。
In this module, we create two templates to streamline the code of the Employee Directory application.
このモジュールでは、Employee Directoryアプリケーションのコードを合理化するための2つのテンプレートを作成します。
We use Handlebars.js but the same result can be achieved using the other HTML template solutions.
Handlebars.jsを使用します が、他のHTMLテンプレートソリューションを使用しても同じ結果が得られます。
Handlebars.jsについては下記ページを読んでおくと、ソースコードを書くときに何をやってるか理解しやすいです。
JavaScriptのテンプレートエンジンHandlebars入門
Step 1: Define the templates
ステップ1 テンプレートを定義する
下記の通りindex.htmlに変更を加えます。
1. handlebars.js をincludeするようにscriptタグを追加します。
<script src="lib/handlebars.js"></script>
2. ratchet.css と styles.cssをindex.htmlのヘッダータグ以下に加える。
ratchet.cssは、モバイルアプリケーション用のスタイルを提供するシンプルなCSSツールキットです。
<link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">
3. ホームビューをレンダリングするHTMLテンプレートを作成します。
このスクリプトタグをbodyタグの最初の子として追加します。
要するに以前SPA対応の際にapp.jsに書いた一部分をhtml側に持ってきます。
<script id="home-tpl" type="text/template">
<header class="bar bar-nav">
<h1 class="title">Directory</h1>
</header>
<div class="bar bar-standard bar-header-secondary">
<input class='search-key' type="search"/>
</div>
<div class="content"></div>
</script>
4. 従業員リストをレンダリングするHTMLテンプレートを作成します。
前のスクリプトタグの直後にこのスクリプトタグを追加します。
中身を見ると、Local Functionsブロックをhtml側に移植しています。(書き方が違いますが)
<script id="employee-list-tpl" type="text/template">
<ul class="table-view">
{{#each this}}
<li class="table-view-cell media">
<a href="#employees/{{ id }}">
<img class="media-object pull-left" src="assets/pics/{{pic}}">
<div class="media-body">
{{firstName}} {{lastName}}
<p>{{title}}</p>
</div>
</a>
</li>
{{/each}}
</ul>
</script>
Step 2: Use the Templates
ステップ2 テンプレートを使う
app.jsのimmediate関数を次のように変更します。
1. サービス変数宣言の直前で、上記で定義したテンプレートのコンパイル済みバージョンを保持する2つの変数を宣言します。
var homeTpl = Handlebars.compile($("#home-tpl").html());
var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());
2. インラインHTMLの代わりにhomeTplテンプレートを使用するようにrenderHomeView関数を変更する：
function renderHomeView() {
$('body').html(homeTpl());
$('.search-key').on('keyup', findByName);
}
3. インラインHTMLではなく、employeeListTplテンプレートを使用するようにfindByName関数を変更します。
function findByName() {
service.findByName($('.search-key').val()).done(function (employees) {
$('.content').html(employeeListTpl(employees));
});
}
4. アプリケーションをテストします。
モバイルっぽいUIになった！
なお、ステップ3はiOSのテスト環境がないのでパスします。
参考URL
Module 8: Using Handlebars Templates