Module 7: Setting Up a Single-Page Application（和訳）

ステップ
原文/参考記事
次のチュートリアル
前のチュートリアル

Single-Page Application(SPA)とは、１つのHTMLページで生成されるWebアプリケーションです。ユーザの操作に応じて、SPAのViewはDOMに挿入されたり、DOMから削除されたりします。SPAのアーキテクチャはモバイルアプリに特に適しています。

ページの更新が必要ないため、（普通のWebページ）より流動的でネイティブアプリに似ています。
UIはサーバ側に依存せず、オフラインでも動作するアプリの理想的な構造を実現するため全てクライエントサイドで作られています。

この章では、Employee DirectoryをSPAに変換させるための基本的な環境を準備します。

ステップ

index.htmlの編集

1.index.htmlにて、bodyタグ内のHTMLマークアップを削除しましょう。（scriptタグは残しておいてください）

<body>

    <!-- remove HTML markup inside the body. ::Module 7: Setting Up a Single-Page Application -->
    <!-- <p><button class="help-btn">Help</button></p>
    <div class='header'>
        <h1>Directory</h1>
    </div>
    <div class='search-view'>
        <input class='search-key' type="search" placeholder="Enter name" />
        <ul class='list employee-list'></ul>
    </div> -->
    <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>

renderHomeView()の実装

2.app.jsの即時実行関数内にて、renderHomeView()関数を定義しましょう。（findByName関数のすぐ後に定義して下さい。）関数を実装することで、Home View markupをbodyタグに追加してくれます。

// define renderHomeView() ::Module 7: Setting Up a Single-Page Application
function renderHomeView() {
    var html =
      "<h1>Directory</h1>" +
      "<input class='search-key' type='search' placeholder='Enter name'/>" +
      "<ul class='employee-list'></ul>";
    $('body').html(html);
    $('.search-key').on('keyup', findByName);
}

初期化ロジックの修正

3.app.jsにて、データを初期化する機能を修正しましょう。初期化に成功した後に、Home Viewを表示させるためrenderHomeView関数が呼ばれるように修正します。

    var service = new EmployeeService();
    service.initialize().done(function () {
        console.log("Service initialized");
        // call renderHomeView() ::Module 7: Setting Up a Single-Page Application
        renderHomeView();
    });

keyupイベントの移植

4.keyupイベントの登録をrenderHomeView関数に移動させたので、Event Registration部分に元々あったkeyupイベントを削除して下さい。

Helpボタンイベントの削除

5.Helpボタンはもう存在しないので、Event Registration部分からHelpボタンのクリックイベントハンドラーを削除して下さい。

/* --------------------------------- Event Registration -------------------------------- */
    // delete keyup event ::Module 7: Setting Up a Single-Page Application
    // $('.search-key').on('keyup', findByName);
    // $('.help-btn').on('click', function() {
    //     alert("Employee Directory v3.4");
    // });

動作確認

6.動作確認してみましょう。

f:id:kawakeee:20201107230256g:plain

ステップ4と5を見落としていないことを確認してください。そうしないと、チュートリアルの後半でファイル検索が二度実行されることによる原因調査が難しい問題に直面してしまいます。

長野エンジニアライフ

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