長野エンジニアライフ

東京から長野に移住したエンジニアのブログです。🦒🗻⛰

トップ > Module 8: Using Handlebars Templates（和訳）

Module 8: Using Handlebars Templates（和訳）

JavaScriptで記述したHTMLを、DOMに挿入することは退屈/面倒なことです。アプリケーションが実装/メンテナンスしづらいものになってしまいます。HTMLテンプレートを使えば、(HTMLタグによる)UI定義をJSコードから分離するので、この課題を解決できます。HTMLテンプレートによる解決法はたくさんあります。（例をあげると、Mustache.js/Handlebars.js/Underscore.js などがあります。）


この章では、Employee Directoryアプリケーションのコードを合理化するために２つのテンプレートを作成します。今回は、Handlebars.jsを使用していきます。他のHTMLテンプレートライブラリを使っても同じ結果を得ることはできます。

ステップ1：テンプレートの定義

index.htmlを以下の手順で修正して下さい。

handlebarsライブラリの追加

1.handlebars.jsライブラリを参照するスクリプトタグを追加して下さい。

<body>
    <!-- add handlebars.js ::Module 8: Using Handlebars Templates -->
    <script src="lib/handlebars.js"></script>
    <script src="lib/fastclick.js"></script>
    <script src="cordova.js"></script>
    <script src="lib/jquery.js"></script>
    <script src="js/services/websql/EmployeeService.js"></script>
    <script src="js/app.js"></script>
</body>

スタイルシートの追加

2.ヘッダー部にratchet.cssとstyles.cssを追加します。

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- add ratchet/styles ::Module 8: Using Handlebars Templates -->
    <link href="assets/ratchet/css/ratchet.css" rel="stylesheet">
    <link href="assets/css/styles.css" rel="stylesheet">
</head>

HTMLテンプレート（ヘッダーバー）の追加

3.Home Viewを表示させるためのHTMLテンプレートを作成します。bodyタグの最初の子要素として以下のscriptタグを追加して下さい。

<body>
    <!-- render HTML template ::Module 8: Using Handlebars Templates(step-1_3) -->
    <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>

HTMLテンプレート（リスト）の追加

4.従業員リストを表示させるためのHTMLテンプレートを作成します。上記のテンプレート要素の次に以下のscriptタグを追加して下さい。

    <!-- render HTML template ::Module 8: Using Handlebars Templates(step-1_4) -->
    <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>

ステップ2：テンプレートの使用

app.jsの即時実行関数を以下の手順で修正して下さい。

ローカル変数の追加

1.変数serviceの宣言の直前に、上記で定義したテンプレートをコンパイルした値を保持する変数をそれぞれ宣言して下さい。

// add two local variables ::Module 8: Using Handlebars Templates (step-2_1)
var homeTpl = Handlebars.compile($("#home-tpl").html());
var employeeListTpl = Handlebars.compile($("#employee-list-tpl").html());

renderHomeView関数の修正

  1. HTMLを挿入する代わりにhomeTplテンプレートを使用するため、renderHomeView関数を修正して下さい。
function renderHomeView() {
        // modify renderHomeView ::Module 8: Using Handlebars Templates (step-2_2)
        // var html =
        //     "<h1>Directory</h1>" +
        //     "<input class='search-key' type='search' placeholder='Enter name'/>" +
        //     "<ul class='employee-list'></ul>";
        // $('body').html(html);
        $('body').html(homeTpl());
        $('.search-key').on('keyup', findByName);
    }

findByName関数の修正

3.HTMLを挿入する代わりにemployeeListTplテンプレートを使用するため、findByName関数を修正して下さい。

function findByName() {
        // modify findByName ::Module 8: Using Handlebars Templates (step-2_3)
        // service.findByName($('.search-key').val()).done(function (employees) {
        //     var l = employees.length;
        //     var e;
        //     $('.employee-list').empty();
        //     for (var i = 0; i < l; i++) {
        //         e = employees[i];
        //         $('.employee-list').append('<li><a href="#employees/' + e.id + '">' + e.firstName + ' ' + e.lastName + '</a></li>');
        //     }
        // });
        service.findByName($('.search-key').val()).done(function (employees) {
            $('.content').html(employeeListTpl(employees));
        });
    }

動作確認

4.アプリを動作確認して下さい。 f:id:kawakeee:20201108130105g:plain

ステップ3：ステータスバーの修正（iOS7の考慮）

iOS7では、ステータスバーがアプリケーションビューと重なってしまいます。そのため、ステータスバーのテキストがヘッダーのテキストが被ってしまうことがあります。この課題は、statusbar pluginを使用することにより修正できます。

プラグインの追加

1.statusbar pluginの追加

cordova plugin add cordova-plugin-statusbar

app.jsの修正

2.app.jsにて、devicereadyハンドラーの上部に以下のコードを追加して下さい。

    document.addEventListener('deviceready', function () {
        // add ::Module 8: Using Handlebars Templates (step-3_2)
        StatusBar.overlaysWebView( false );
        StatusBar.backgroundColorByHexString('#ffffff');
        StatusBar.styleDefault();

動作確認

再度ビルドして、iOS端末/エミュレータで動作確認してみましょう。（本記事ではiOS7で動作確認していないため割愛、他iOSバージョンに影響がないことは確認済）

原文/参考記事

ccoenraets.github.io

次のチュートリアル

前のチュートリアル

kawakeee.hatenablog.com