この記事は機械翻訳されたものです。

データ ポイント

あの JavaScript で難なくデータ アクセス (機械翻訳)

Julie Lerman

コード サンプルのダウンロード

Julie Lermanソフトウェア開発に来るとき、私は自分自身の配管工として考えるが、クライアント側の開発が同様のかなりの量を行う必要。 でもこのコラムでは、クライアント アプリケーションのデータ アクセスに交わるベンチャーします。 しかし、クライアント側 JavaScript の場合、それはかなりされている — 私の JavaScript のスキルは、残念ながら、まだ欠けているし、各学習曲線痛み私にとって (そしてガス抜きにさらされて私の Twitter の信者は、) の世界です。 しかし、レンガ壁をプッシュし、成功を取得するときは常に価値があります。 何も働いて JavaScript で私にとって容易に何かを開いて腕を歓迎です。 単一ページのアプリケーションの Vermont.NET ユーザー グループ プレゼンテーションの実行中区鐘から IdeaBlade、あきらめたときに、私たちそれなら、ぜひこのオープン ソース データ アクセス API の JavaScript は彼と彼のチームに調理された、だから私は非常に興味があった。 エンティティ フレームワークと私の経験の観点から、私が見たもの匹敵するクライアント側の Web 開発のための EF を使用するでした。 API は、そよ風と呼ばれ、この執筆時点ではベータ版です。 ベルは、私のためにこの列の詳細については、そよ風を助ける彼の時間と寛大だった。 あなたはそれを得ることができます breezejs.com、ドキュメント、ビデオ、サンプルの印象的な配列をまた見つけるでしょう。

私の 2012 年 6 月のデータ ポイントのコラム、"データ バインド OData の Web アプリを Knockout.js"(msdn.microsoft.com/magazine/jj133816)、Knockout.js を使用して、クライアント側でデータ バインディングをより簡単に実行するに焦点を当てた。 6 月のコラムから例を再訪するんだそよ風はノックアウトでシームレスに動作します。 私の目標は、そよ風を紹介私のコーディングの作業例のワークフローで簡素化できる方法を見ることです。

  • データをサーバーから取得します。
  • バインドし、そのデータを提示します。
  • 変更をサーバーにプッシュ バック。

どのようにパズルのピースを一緒に合わせて見ることができるので、更新されたソリューションの重要な部分を介してを歩きます。 正しくセットアップ ソリューションとテストに沿ってフォローしたい場合のものをから完全なソリューションをダウンロードすることができます archive.msdn.microsoft.com/mag201212DataPoints

元のサンプル

私の以前のソリューションの主要な手順を以下に示します。

  • クライアント側では、私はノックアウト データ バインディングに使用できる person クラス定義。
function PersonViewModel(model) {
  model = model || {};
  var self = this;
  self.FirstName = ko.observable(model.Name || ' ');
  self.LastName = ko.observable(model.Name || ' ');
}
  • 私のデータは OData データ サービス経由で、だから私は datajs、JavaScript から OData 使用のツールキットを使用してデータにアクセスされました。
  • (これは JSON として返されます) クエリの結果を取ったし、値と PersonViewModel のインスタンスを作成します。
  • 私のアプリは、次もユーザーによる変更を座標データ バインドを処理ノックアウトを聞かせてください。
  • 変更の PersonViewModel インスタンスを取ったし、私の JSON オブジェクトその値からを更新します。
  • 最後に、OData 経由でサーバーに保存する datajs に JSON オブジェクト渡されます。

それはその小さなサンプルをより多くの複雑さを追加したのでさえ関連データには気にしませんでした。

ASP.NET Web API を使った更新サービス

そよ風と私は、私の OData サービスまたは ASP.NET Web API (asp。 定義されたサービスの HTTP 呼び出しを行うことができます。 net/web-api)。 私は昔、以前同じ EF モデルに対する私のサービスを ASP.NET Web API は、切り替え — 1 つ加えて。 私の元のサンプル人データのみを公開しました。 私は知っているすべての開発者は個人用デバイスの小さいコレクションがあり、データ、デバイス クラスの形で今関連しています。 私 ASP.NET Web API を公開関連の関数は、人のデータを返す GET です。 デバイスのデータを別の取得; 変更を保存するための単一のポスト。 私もメタデータ関数私のデータのスキーマを公開を示すように使用して図 1。 そよ風は、私のモデルを理解するためにこのメタデータを使用します。

図 1 キー成分私 Web API サービスの

readonly EFContextProvider<PersonModelContext> _contextProvider =
  new EFContextProvider<PersonModelContext>();
[AcceptVerbs("GET")]
public IQueryable<Person> People()
{
  return _contextProvider.Context.People;
}
[AcceptVerbs("GET")]
public IQueryable<Device> Devices()
{
  return _contextProvider.Context.Devices;
}
[AcceptVerbs("POST")]
public SaveResult SaveChanges(JObject saveBundle)
{
  return _contextProvider.SaveChanges(saveBundle);
}
[AcceptVerbs("GET")]
public string Metadata()
{
  return _contextProvider.Metadata();
}

サーバー上の Breeze.NET

メモこれらのメソッドで使用される _contextProvider 変数を取る。 私は直接私 EF DbContext (PersonModelContext) のメソッドを呼んでいるないです。 代わりに、私はそれとそよ風 EFContextProvider ラップしました。 これは、_contextProvider.Metadata メソッドは、saveBundle パラメーターを受け取る SaveChanges の署名だけでなくから来ているです。 SaveBundle とそよ風せてそれをデータベースに永続化するには、私 DbContext に渡す私のアプリからデータの変更のセットを送るつもりです。

"BreezyDevices、"私の ASP.NET Web API のアプリを名前しているので、今 http://localhost:19428/api/breezydevices/metadata を使用してスキーマを要求できます。 GET メソッドのいずれかを指定するためのデータを照会できます。http://localhost:19428/api/breezydevices/people。

そよ風、クライアント側でされますクエリ、ASP.NET Web API リモート サービスに保存するので、私は私のクライアント アプリケーションから datajs を削除できます。

そよ風が私のサンプルを支援する方法について

このサンプルのスコープでは、3 つの痛みに焦点にそよ風を使用します。

  1. 私のサービスを返し、裸の JSON を受け入れますが、ノックアウト オブザーバブル プロパティ UI へのデータ バインドを持つ JavaScript オブジェクトを操作する必要があります。
  2. 関連データを含めるしたいが、これはクライアントでは難しいです。
  3. 複数の変更をサーバーに保存送信する必要があります。

そよ風と私の結果のデータを直接データ バインドをできます。 風ノックアウトを使用するを構成し、応答では、それノックアウト オブザーバブル プロパティ私のカバーの下作成されます。 つまり作業関連データをバインドできるオブジェクトを JSON から翻訳する必要はありませんし、私のクエリの結果を使用して、クライアント側でグラフを再定義する余分な努力をする必要はありませんのではるかに簡単です。

いくつかのサーバー側の構成は、そよ風にかかわるです。 サンプルのクライアント側のデータ アクセス部分を集中できるようにその詳細風のマニュアルを任せます。 私はこのサンプルでは何に活用できてよよりも風にたくさんより多くがあるので、一度私は与えてくれたあなたそれあなたを訪問したいと思うの味 breezejs.com の詳細。

図 2 風が収まる場所サーバー側とクライアント側のワークフローに示します。

The Breeze.NET API Helps on the Server While the BreezeJS API Helps on the Client
BreezeJS API クライアントで役立ちますが図 2 Breeze.NET API サーバーに役立ちます

風からの照会

OData と Entity Framework での私の経験と風を照会する身近になります。 そよ風 EntityManager クラスとを動作します。 EntityManager はサービスのメタデータによって供給されるデータ モデルを読み取ることができるし、JavaScript「エンティティ」オブジェクトを独自に生成; エンティティ クラスを定義またはマッパーを作成する必要はありません。

クライアント側の構成を同様に行うのビットです。 たとえば、次のコード スニペットはいくつかの風の名前空間へのショートカットを作成し、ノックアウトと ASP.NET Web API を使用して微風を構成します。

var core = breeze.core,
           entityModel = breeze.entityModel;
core.config.setProperties({
  trackingImplementation: entityModel.entityTracking_ko,
  remoteAccessImplementation: entityModel.remoteAccess_webApi
});

風代替バインディング フレームワーク (Backbone.js JavaScript の Windows ライブラリなど) とデータ アクセス テクノロジ (OData) などの番号を使用するを構成することが可能です。

次に、私のサービスの相対 uri を知っているエンティ ティー マネージャーを作成します。 EntityManager は、エンティティ フレームワークまたは OData コンテキストに対等であります。 そよ風が吹く私のゲートウェイとして機能し、データ キャッシュします。

var  manager = new entityModel.EntityManager('api/breezydevices');

今私はクエリを定義してそれは私のため実行私エンティティー マネージャーことができます。 このコードは、エンティティ フレームワークおよび LINQ をエンティティまたは風を使用する方法を学習の私のお気に入りの一部だったので OData クライアントの Api のいずれかで作業するを使用するあまりにも異種されていません。

function getAllPersons(peopleArray) {
    var query = new entityModel.EntityQuery()
      .from("People")
      .orderBy("FirstName, LastName");
    return manager
      .executeQuery(query)
      .then(function (data) {
        processResults(data,peopleArray); })
      .fail(queryFailed);
  };

私はこれをクライアント側でやって、私のクエリの実行が非同期的に実行できる executeQuery メソッド私どのクエリが正常に実行されるかを定義することができます理由です (うち) (.fail) が失敗した場合はどうのと同様。

配列を渡すことに注意してください (まもなく表示されますノックアウトの観察可能な配列です) に getAllPersons。 クエリの実行が成功した場合は、配列を空にして、サービスからデータを読み込む processResults メソッドにその配列を渡します。 以前私は結果を反復処理し、各 PersonViewModel インスタンスは自分自身を作成してきたでしょう。 風を使用して、データを直接返さ使用することができます。

function processResults(data, peopleArray) {
    var persons = data.results;
    peopleArray.removeAll();
    persons.forEach(function (person) {
      peopleArray.push(person);
    });
  }

これは私のビューを紹介します人オブジェクトの配列を与えます。

GetAllPersons 関数はオブジェクトの内部 dataservice を呼んでいます。 Dataservice にコードの次のビットを使用します。

フェッチ ビュー モデル

6 月のノックアウトの私の記事からのサンプルでは、クエリと結果ビューでのデータ バインディングを使用して、PersonViewModel クラスから分離されました。 だから、クエリを実行し、結果、PersonViewModel インスタンスを書いたマッピング コードに翻訳します。 コードまたは風 PersonViewModel マッピング必要はありませんので、私のアプリをこの時間は少し賢くし、あるそれはデータベースからフェッチ私 dataservice 投稿者オブジェクトの配列を表示します。 これを反映するには、私は今 PeopleViewModel という名前のオブジェクトがあります。 これは、dataservice.getAllPersons を使用して設定をノックアウト観察可能な配列としてを定義した人々 プロパティを公開します。

(function (root) {
  var app = root.app;
  var dataservice = app.dataservice;
  var vm = {
    people: ko.observableArray([]),
    }
  };
  dataservice.getAllPersons(vm.people);
  app.peopleViewModel = vm;
}(window));

ダウンロード サンプルでは、アプリケーション ロジックの出発点です main.js と呼ばれるファイルを見つけることができます。 ノックアウト applyBindings メソッドを呼び出すコードの次の行が含まれています。

ko.applyBindings(app.peopleViewModel, $("content").get(0));

ApplyBindings メソッドは、ビュー モデルのプロパティとメソッド ビューで宣言されたデータ バインドを介して HTML UI コントロールに接続します。

ビューは、この場合は HTML の小さな塊に私の index.cshtml です。 結合し、人々 の配列に各 person オブジェクトの最初と最後の名前が表示されますノックアウト データ バインド マークアップに注意してください。

<ul data-bind="foreach: people">
  <li class="person" >
    <label data-bind="text: FirstName"></label>
    <label data-bind="text: LastName"></label>
  </li>
</ul>

私のアプリを実行すると私は私の人のデータの読み取り専用ビューで示すように取得図 3

Using Breeze and Knockout to Easily Consume Data in JavaScript
図 3 そよ風とノックアウトを使用して JavaScript 内のデータを容易に消費するには

調整の JavaScript とノックアウト編集を許可するには

6 月のコラムからを思い出すかもしれませんが、ノックアウトそれを編集するためのデータ バインドを容易に。 一緒にそよ風、これは簡単にデータを編集し、サーバーに永続化するは素晴らしい組み合わせです。

最初に、そよ風の manager.saveChanges メソッドを呼び出して、dataservice オブジェクトに関数を追加します。 呼び出されると、そよ風 EntityManager 保留中の変更をバンドルされ Web API サービスへ投稿します。

function saveChanges() {
     manager.saveChanges();
  }

その後、dataservice の機能として新しい saveChanges 関数を公開します。

var dataservice = {
    getAllPersons: getAllPersons,
    saveChanges: saveChanges,
  };

今すぐオブジェクトを公開する独自ニーズ私 PeopleViewModel ビューにメソッドのバインディングを保存; ビュー モデルは、dataservice saveChanges メソッドを関数デリゲートを保存します。 ここで JavaScript「匿名関数」を使用保存ビュー モデルを定義します。

var vm = {
    people: ko.observableArray([]),
    save: function () {
      dataservice.saveChanges();
    },
  };

次に、私は私のラベルを置換する input 要素 (テキスト ボックス)、ユーザーが Person オブジェクトを編集できるようにします。 私は、ユーザー入力への双方向のバインドを有効にする、ノックアウト「値」キーワードに「テキスト」から切り替えることがあります。 私はまた PeopleViewModel.save メソッドにバインドするクリック イベントの画像を追加します。

<img src="../../Images/save.png" 
  data-bind="click: save" title="Save Changes" />
<ul data-bind="foreach: people">
  <li class="person" >
    <form>
      <label>First: </label><input 
        data-bind="value: FirstName" />
      <label>Last: </label> <input 
        data-bind="value: LastName" />
    </form>
  </li>
</ul>

必要な処理は、これですべてです。 そよ風とノックアウトの残りの世話をする ! 編集用に表示されるデータを見ることができます図 4

Using Breeze to Save Data via JavaScript
図 4 そよ風を使用して JavaScript を介してデータを保存するには

これらのフィールドの一部またはすべてを編集でき、保存をクリックしてボタン。 そよ風 EntityManager すべてのデータ変更を収集し、それらを順番にそれらデータベースを更新するには、エンティティ フレームワークへ送信されますサーバーまでプッシュします。 挿入および削除を含むようにこのデモを延長することはありませんが、風は確かにそれらの変更も処理できます。

大きなフィニッシュ — 追加関連データ

これは多くの開発者の恐怖任意の JavaScript アプリケーションの一部です — このコラムを書くしたい正確な理由です。

私は私のスクリプトに 1 つの小さな変更を加えるし、小さなマークアップ一人一人は、編集可能なマスターになるフォームを追加/­詳細人。

私のスクリプトの変更私はよ変更ここで、クエリがそよ風に追加することによって、dataservice されるクエリ メソッドを熱心に-を展開­人とともにそれぞれの人のデバイスを読み込みます。 展開 OData または NHibernate から認識可能性があります、エンティティ フレームワークに含めるに似ています用語です (そよ風も、簡単に事実の後の関連データを読み込むためにサポートしています)。

var query = new entityModel.EntityQuery()
           .from("People")
           .expand("Devices")
           .orderBy("FirstName, LastName");

それに示すようにデバイスのデータを表示する方法を知っているように私は私のビューを変更よ図 5

図 5 デバイスのデータを表示するビューを変更します。

<ul data-bind="foreach: people">
  <li class="person" >
    <form>
      <label>First: </label><input 
        data-bind="value: FirstName" />
      <label>Last: </label> <input 
        data-bind="value: LastName" />
      <br/>
      <label>Devices: </label>
      <ul class="device" data-bind="foreach: Devices">
        <li>
          <input data-bind="value: DeviceName"/>
        </li>
      </ul>                     
    </form>
  </li>
</ul>

よろしいでしょうか。 わかるように図 6、そよ風を処理、熱心に読み込むと、クライアント側でのグラフを構築します。 また、更新サービスに戻るに送信されるデータを調整します。 サーバー側では、そよ風 EFContextProvider すべてのそれを受信し、Entity Framework はデータベースにデータを永続化する必要がありますを取得することを確認します、変更データを並べ替えます。

Consuming and Saving Related Data
図消費と節約 6 関連データ

この執筆の時にこの一対多の関係では、シンプルでしたがそよ風のベータ版は多対多リレーションシップをサポートしていません。

痛み無料クライアント側データ アクセス

ベル私の java スクリプトの設定を集中的に使用しデータ-アクセス-集中そよ風を触発されたプロジェクトに取り組んで彼自身の苦しい経験だったに伝えます。 彼の会社、IdeaBlade、常に非接続のデータ処理の問題を解決するソリューションの作成に焦点を当てているし、開発者はこのオープン ソース プロジェクトに大量の経験をもたらすことができた。 私はいつも私のスキルは、まず始めに、ラメですので、多くの JavaScript を使用してプロジェクトに乗り出すには消極的きたし、データ アクセス ビット私は不幸になる知っています。 それを見たとすぐ風に非常に興味を持って. 私だけその表面傷が付いているにもかかわらず、私はあなたにこの資料でを示したものの最後のビット — 関連データの保存を消費しやすかった — 何が本当に私を獲得しています。

Julie Lerman は、バーモント ヒルズ在住の Microsoft MVP、.NET の指導者、およびコンサルタントです。世界中のユーザー グループやカンファレンスで、データ アクセスなどの Microsoft .NET トピックについてプレゼンテーションを行っています。彼女はブログで thedatafarm.com/blog 、「Entity Framework のプログラミング」の著者 (2010) コードの最初のエディション (2011) DbContext 版 (2012 年) だけでなく、オライリー メディアからすべてあり。Twitter ( twitter.com/julielerman、英語) で彼女をフォローしてください。

この記事のレビュー、次技術専門家のおかげで:病棟ベル