Hot Towel テンプレート

[アーティクル]
05/13/2024

ホットタオル MVC テンプレートは John Papa 氏によって記述されています

ダウンロードするバージョンを次から選択します。

ホットタオル MVC テンプレート (Visual Studio 2012 用)

ホットタオル MVC テンプレート (Visual Studio 2013 用)

ホットタオル : これなしで SPA に取り組むのはお勧めしません。

SPA を構築したいけれど、どこから始めれば良いかわからないと思っていませんか? ホットタオルを使用すれば、SPA とそこでの構築に必要なすべてのツールがすぐに手に入ります。

ホットタオルは、ASP.NET でシングルページアプリケーション (SPA) を構築するための優れた開始点を生み出します。コード、ビューナビゲーション、データバインディング、豊富なデータ管理、シンプルながらエレガントなスタイル設定のためのモジュール構造が用意されていて、すぐに利用できます。ホットタオルが、SPA を構築するために必要なすべてのものを提供するため、配管ではなく、開発するアプリに集中できます。

SPA の構築の詳細については、John Papa 氏の動画、チュートリアル、Pluralsight コースを参照してください。

アプリケーション構造

ホットタオル SPA は、アプリケーションを定義する JavaScript ファイルと HTML ファイルが含まれるアプリフォルダーを提供します。

アプリフォルダー内には次のものが含まれます:

Durandal
services
ビューモデル
ビュー

アプリフォルダーには、モジュールのコレクションが含まれています。これらのモジュールは機能をカプセル化し、他のモジュールへの依存関係を宣言します。 views フォルダーにはアプリケーションの HTML が含まれ、viewmodels フォルダーにはビューのプレゼンテーションロジック (一般的な MVVM パターン) が含まれます。 services フォルダーは、HTTP データの取得やローカルストレージの操作など、アプリケーションで必要になる可能性がある一般的なサービスを格納するのに最適です。複数のビューモデルでサービスモジュールのコードを再利用するのが一般的です。

ASP.NET MVC サーバー側のアプリケーション構造

ホットタオルでは、使い慣れた、強力な ASP.NET MVC 構造に基づいて構築を行います。

App_Start
Content
コントローラー
モデル
スクリプト
ビュー

Visual Studio 2012 のホットタオル SPA テンプレートを使用したインストール

ホットタオルは、Visual Studio 2012 のテンプレートとしてインストールすることができます。 File | New Project をクリックして、ASP.NET MVC 4 Web Application を選択するだけです。それから、[Hot Towel Single Page Application] テンプレートを選択して実行します。

NuGet パッケージを使用したインストール

ホットタオルは、既存の空の ASP.NET MVC プロジェクトを拡張する NuGet パッケージでもあります。 Nuget を使用してインストールするだけで、実行できます。

Install-Package HotTowel

ホットタオルでの構築方法

ただ、コードの追加を開始するだけです。

独自のサーバー側コード (Entity Framework と WebAPI がお勧め) を追加します (特に Breeze.js の使用が適しています)
App/views フォルダーにビューを追加します
App/viewmodels フォルダーにビューモデルを追加します
新しいビューに HTML と Knockout のデータバインディングを追加します
shell.js でナビゲーションルートを更新します

HTML/JavaScript のチュートリアル

Views/HotTowel/index.cshtml

index.cshtml は、MVC アプリケーションの出発点となるルートとビューです。これには、必要なすべての標準的なメタタグ、css リンク、JavaScript 参照が含まれています。本文には、要求されたときにすべてのコンテンツ (ビュー) が配置される場所である 1 つの <div> が含まれています。 @Scripts.Render では、Require.js を使用してアプリケーションのコードの開始ポイント (main.js ファイルに含まれる) が実行されます。 splash screen は、アプリが読み込まれている間のスプラッシュスクリーンを作成する方法を示すために用意されています。

<body>
    <div id="applicationHost">
        @Html.Partial("_splash")
    </div>

    @Scripts.Render("~/scripts/vendor")
        <script type="text/javascript" src="~/App/durandal/amd/require.js" 
            data-main="@Url.Content("~/App/main")"></script>
</body>

App/main.js

main.js ファイルには、アプリが読み込まれるとすぐに実行されるコードが含まれています。ここは、ナビゲーションルートを定義し、起動ビューを設定し、アプリケーションのデータの準備などのセットアップ/ブートストラップを実行する場所です。

main.js ファイルでは、アプリケーションの起動に役立つ Durandal のいくつかのモジュールが定義されています。 define ステートメントは、モジュールの依存関係を解決して、関数でそれを使用できるようにするのに役立ちます。最初にデバッグメッセージを有効にして、アプリケーションが実行しているイベントに関するメッセージをコンソールウィンドウに送信します。 app.start コードは、アプリケーションを起動するように Durandal フレームワークに指示します。この規則は、Durandal がすべてのビューを認識し、ビューモデルがそれぞれ同じ名前の付いたフォルダーに含まれるように設定されています。最後に、app.setRoot により、事前定義された entrance アニメーションを使用した shell の読み込みが開始されます。

define(['durandal/app', 
        'durandal/viewLocator', 
        'durandal/system', 
        'durandal/plugins/router'],
    function (app, viewLocator, system, router) {

    // Enable debug message to show in the console 
    system.debug(true);

    app.start().then(function () {
        router.useConvention();
        viewLocator.useConvention();
        //Show the app by setting the root view model for our application.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

ビュー

ビューは App/views フォルダー内にあります。

shell.html

shell.html には HTML のマスターレイアウトが含まれています。他のすべてのビューは、shell ビュー内のどこかに構成されます。ホットタオルでは、ヘッダー、コンテンツ領域、フッターの 3 つの領域で shell が用意されています。これらの各領域では、要求されたときに他のビューからコンテンツが読み込まれます。

ヘッダーとフッターの compose バインドは、それぞれ nav ビューと footer ビューを指すように、ホットタオルでハードコーディングされています。セクション #content の compose バインドは、router モジュールのアクティブな項目にバインドされます。つまり、ナビゲーションリンクをクリックすると、この領域に対応するビューが読み込まれます。

<div>
    <header>
        <!--ko compose: {view: 'nav'} --><!--/ko-->
    </header>
     <section id="content" class="main container-fluid">
        <!--ko compose: {model: router.activeItem, 
            afterCompose: router.afterCompose, 
            transition: 'entrance'} -->
        <!--/ko-->
    </section>
    <footer>
        <!--ko compose: {view: 'footer'} --><!--/ko-->
    </footer>
</div>

nav.html

nav.html には SPA のナビゲーションリンクが含まれています。これは、メニュー構造などを配置できる場所です。多くの場合、これは、router モジュールに (Knockout を使用して) バインドされたデータであり、shell.js で定義したナビゲーションを表示します。 Knockout はデータバインド属性を検索し、それを shell ビューモデルにバインドしてナビゲーションルートを表示します。router モジュールが、あるビューから別のビューに移動している間は、(Twitter Bootstrap を使用して) プログレスバーを表示します (router.isNavigating を参照)。

<nav class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <a class="brand" href="/">
            <span class="title">Hot Towel SPA</span> 
        </a>
        <div class="btn-group" data-bind="foreach: router.visibleRoutes">
            <a data-bind="css: { active: isActive }, attr: { href: hash }, text: name" 
                class="btn btn-info" href="#"></a>
        </div>
        <div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
            <div class="progress progress-striped active page-progress-bar">
                <div class="bar" style="width: 100px;"></div>
            </div>
        </div>
    </div>
</nav>

home.html と details.html

これらのビューには、カスタムビューの HTML が含まれます。 nav ビューのメニューの home リンクがクリックされると、home ビューは shell ビューのコンテンツ領域に配置されます。これらのビューは拡張したり、独自のカスタムビューに置き換えたりすることができます。

footer.html

footer.html には、shell ビューの下部にあるフッターに表示される HTML が含まれます。

ViewModel

ViewModel は App/viewmodels フォルダー内にあります。

shell.js

shell ビューモデルには、shell ビューにバインドされたプロパティと関数が含まれます。多くの場合、ここにはメニューナビゲーションバインドが置かれています (router.mapNav ロジックを参照)。

define(['durandal/system', 'durandal/plugins/router', 'services/logger'],
    function (system, router, logger) {
        var shell = {
            activate: activate,
            router: router
        };

        return shell;

        function activate() {
            return boot();
        }

        function boot() {
            router.mapNav('home');
            router.mapNav('details');
            log('Hot Towel SPA Loaded!', null, true);
            return router.activate('home');
        }

        function log(msg, data, showToast) {
            logger.log(msg, data, system.getModuleId(shell), showToast);
        }
    });

home.js と details.js

これらのビューモデルには、home ビューにバインドされたプロパティと関数が含まれます。また、ビューのプレゼンテーションロジックも含まれており、データとビューを結び付けるものとなっています。

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate,
        title: 'Home View'
    };

    return vm;

    function activate() {
        logger.log('Home View Activated', null, 'home', true);
        return true;
    }
});

サービス

サービスは App/services フォルダーにあります。リモートデータの取得と送信を担うデータサービスモジュールなど、将来のサービスの配置に最適です。

logger.js

ホットタオルでは、services フォルダーに logger モジュールが用意されています。 logger モジュールは、コンソールやポップアップトーストでユーザーに表示するメッセージをログするのに最適です。

次の方法で共有

Hot Towel テンプレート

アプリケーション構造

ASP.NET MVC サーバー側のアプリケーション構造

おすすめのライブラリ

Visual Studio 2012 のホットタオル SPA テンプレートを使用したインストール

NuGet パッケージを使用したインストール

ホットタオルでの構築方法

HTML/JavaScript のチュートリアル

Views/HotTowel/index.cshtml

App/main.js

ビュー

shell.html

nav.html

home.html と details.html

footer.html

ViewModel

shell.js

home.js と details.js

サービス

logger.js

フィードバック

フィードバック

その他のリソース

次の方法で共有

Hot Towel テンプレート

アプリケーション構造

ASP.NET MVC サーバー側のアプリケーション構造

おすすめのライブラリ

Visual Studio 2012 のホット タオル SPA テンプレートを使用したインストール

NuGet パッケージを使用したインストール

ホット タオルでの構築方法

HTML/JavaScript のチュートリアル

Views/HotTowel/index.cshtml

App/main.js

ビュー

shell.html

nav.html

home.html と details.html

footer.html

ViewModel

shell.js

home.js と details.js

サービス

logger.js

フィードバック

フィードバック

その他のリソース

Visual Studio 2012 のホットタオル SPA テンプレートを使用したインストール

ホットタオルでの構築方法