Breeze/Knockout テンプレート

作成者: Mads Kristensen

Breeze/Knockout MVCテンプレートはワードベルによって書かれました

Breeze/Knockout MVC テンプレートをダウンロードする

あなたは"シングルページアプリケーション"(SPA)について聞いて、それが何であるか疑問に思いました。 あなたはそれについて読むことができるが、あなたはむしろ自分自身のためにそれを経験したいと思う。 しかし、誰がサンプルをダウンロードする時間がありますか? Visual Studio を使用している場合は、ASP.NET MVC 4 の "Breeze/Knockout Single Page Application" テンプレートを使用して、SPA を 60 秒未満で起動して実行する例を示します。

Breeze/Knockout SPA テンプレートとは

ほとんどのプロジェクト テンプレートでは、アプリケーション スケルトンが生成されます。 コードを追加してこれらの骨に肉を付け、最終的に動作するアプリケーションを提供します。 Breeze/Knockout SPA テンプレートは異なります。 これは、学習するためのサンプル アプリケーションを生成します。 SPA アプリケーションの設計と、SPA を構築するための多くの手法を示します。

Breeze/Knockout テンプレートは、ASP.NET and Web Tools 2012.2 Update に含まれる KnockoutJS SPA テンプレートのバリエーションです。 Breeze SPA テンプレートは、同じユーザー エクスペリエンスを持つアプリケーションを生成しますが、データ管理に Breeze を使用して実装が異なります。

KnockoutJS SPA テンプレートは、単純なアプリケーションに適した生の jQuery AJAX を使用してサービス要求を行います。 しかし、より高度なアプリには、より厳しいデータ管理要件があります。 たとえば、ほとんどのアプリケーションでは次のようになります。

• 拡張ユーザー セッション中にサーバーに対してクエリを実行し、クエリを再実行します。
• クエリ フィルター、並べ替え、ページングを追加します。
• 複数の画面で同じデータを共有します。
• 多くのオブジェクトに対する変更を蓄積し、1 つのトランザクションとして保存します。
• ユーザーがデータベースに変更をコミットする前に間違いを修正できるように、クライアントで変更を検証します。

BreezeJS ライブラリは、これらの雑用を処理するため、最も重要なアプリケーション ロジックとユーザー エクスペリエンスを開発できます。

Breeze は、JavaScript と HTML で豊富なデータ アプリケーションを構築するためのオープンソース ライブラリであり、これまでスタンドアロン デスクトップ アプリケーションとして提供されてきたアプリの種類です。

Breeze/Knockout テンプレートは、より堅牢なデータ管理インフラストラクチャに向けて、その最初の重要な一歩を踏み出すのに役立ちます。 KnockoutJS SPA テンプレートと外向きに同じサンプル Todo アプリケーションが生成されます。 内部では、AJAX データレイヤーが Breeze に置き換えられるので、2 つのアプローチを並べて比較できます。 もちろん、それは Breeze アプリケーションの可能性にほとんど触れてはいしません。 ただし、Breeze のしくみと、その切り替えを行うために必要な作業がほとんどないことがわかります。

それでは、始めましょう。

Breeze/Knockout テンプレート プロジェクトを作成する

上記の [ダウンロード] ボタンをクリックして、テンプレートをダウンロードしてインストールします。 テンプレートは Visual Studio 拡張機能 (VSIX) ファイルとしてパッケージ化されています。 Visual Studio を再起動する必要がある場合があります。

[テンプレート] ウィンドウ で 、[ インストールされているテンプレート ] を選択し、[ Visual C# ] ノードを展開します。 [ Visual C#] で、[Web] を選択 します。 プロジェクト テンプレートの一覧で、[ MVC 4 Web アプリケーション ASP.NET 選択します。 プロジェクト名を指定して、 [OK] をクリックします。

新しいプロジェクト ウィザードで、Breeze Knockout SPA を選択します。

Ctrl キーを押しながら F5 キーを押して、デバッグなしでアプリケーションをビルドして実行するか、F5 キーを押してデバッグで実行します。

アプリケーションが最初に実行されると、ログイン画面が表示されます。 [サインアップ] リンクをクリックすると、新しいページが表示され、ユーザー名とパスワードを入力できます。 (ログインページと登録ページは、ASP.NET MVC を使用して構築されています。登録フォームを送信すると、サーバーはアカウントの 2 つのアイテムを含む TodoList を生成します。 その後、黄色のメモであなたにそれらを提示します。

今、あなたはSPAの土地にいます。 Todos の操作中に表示され、経験するすべてのものが、Knockout と Breeze の助けを借りてクライアント上でレンダリングおよび管理されます。 ユーザーとしてアプリを調べる ... しかし、開発者の目で。 ブラウザーの開発者ツールを使用して、ネットワーク トラフィックをキャプチャします。 ([インターネット エクスプローラー: F12 キーを押し、[ネットワーク] タブを選択し、[キャプチャの開始] をクリックします)。次に、次の手順を実行します。

• 新しい Todo 項目を追加します。
• ラベルをクリックし、Todo アイテムのタイトルを編集します
• チェック ボックスをオンにして、項目を完了にマークします。 テキスト ボックスが無効になっているため、タイトルは編集できなくなります。
• ラベルの右側にある [x] をクリックします。 アイテムは表示されなくなり、データベースから削除されます。
• 別の項目を選択し、そのタイトルをクリアします。 タイトルが必要であるという検証エラーが表示されます。 しばらくすると、前のタイトルが復元されます。
• とんでもなく長いタイトルを入力します。 タイトルが長すぎるという別の検証エラーが発生します。
• [Todo リストの追加] ボタンをクリックします。 前のリストの左側に新しいリストが表示されます。
• TodoList タイトルで再生し、必要な長さの検証をトリガーします。
• タイトル テキスト ボックスをクリックして、エラー メッセージをクリアします。
• 右上隅の円の "x" をクリックして、TodoList とその Todo を削除します。

検証ロジックは、Breeze によってクライアント側で実行されます。 サーバー モデル クラスの検証属性は、クライアントに伝達され、クライアントがサーバーに連絡する前に自動的に実行されます。

ネットワーク トラフィックを確認します。 Breeze でエラーが検出されたときに、サーバーへの呼び出しがないことに注意してください。 有効な変更ごとに、"/api/Todo/SaveChanges" への POST 要求が発生しました。 Breeze は変更をバンドルし、それらを 1 つの要求として Web API コントローラーの SaveChanges メソッドに送信します。 これは KnockoutJS SPA テンプレートとは異なり、各アイテムの PUT、POST、DELETE 要求を個別に行います。

内部を覗く

このアプリケーションには、クライアント側とサーバー側があります。 クライアント側スタックは、少しの HTML と、アプリケーション JavaScript モジュール ("app" フォルダー内) とサードパーティの JavaScript ライブラリ ("Scripts" フォルダー内) の組み合わせで構成されます。

KnockoutJS SPA テンプレートを調査した場合、これは非常によく知られているはずです。 青いボックスにフォーカスします。 UI アーキテクチャは Model-View-ViewModel (MVVM) であり、ビューの HTML ウィジェットがビュー モデルのサポート プレゼンテーション コードから完全に分離されています。 データ バインディング システム (この場合は Knockout) は、ビューとビュー モデルを調整して、それぞれが他のユーザーに詳しい知識を持たずにジョブを実行できるようにします。

モデルは Todo データをカプセル化します。 モデル内のエンティティは、Knockout 監視可能なプロパティを持つ Breeze によって構築されるため、ビュー内のウィジェットに直接バインドできます。 ビュー モデルは、モデル エンティティを取得して保存するようにデータ コンテキストに要求します。 データ コンテキストは、ほとんどの作業を Breeze に委任します。

サーバー側スタックは、一部の開発者コードと 3 つのプリンシパル .NET ライブラリ (Web API、Entity Framework、Breeze.NET) で構成されます。

基本的なアーキテクチャは、KnockoutJS SPA テンプレートと同じです。 ただし、実装ははるかに簡単です。DTO が削除され、Entity Framework の詳細のほとんどは Breeze.NET に委任されています。

次の手順

コードについては、Breeze Web サイトでクライアントとサーバー スタックの両方について詳しく説明します。

Breeze クライアント側のクエリで遊ぶことをお試しください。フィルターと並べ替えを追加します。 モデル プロパティとエンティティを追加して、エンド ツー エンドの SPA 開発をより良く感じることができます。 デザインに自信がある場合は、Todo の機能を引き裂き、独自の機能に置き換えることができます。

次の大きなステップであるクライアント側の画面を追加し、それらの間を移動する準備が整います。 この SPA テンプレートは後に残し、 John パパのホット タオルなど、より完全な SPA スタックに変わります。これにより、Durandal が Breeze と Knockout のミックスに追加されます。