Wijmo UI for the Web
BreezeJS の使用
| Wijmo ユーザーガイド > 概念 > ウィジェットを統合するフレームワーク > BreezeJS の使用 |
Wijmo は、クライアントアプリケーションにあるデータを管理できる JavaScript ライブラリである Breeze.js をサポートするようになりました。このライブラリを使用して、データをリレーショナルデータベースに格納し、そのデータをクエリーおよび保存し、JavaScript クライアントの多くの画面にまたがってそのデータを共有できます。Breeze.js は、ビジネスデータオブジェクトを動的に作成し、そのプロパティを UI コントロールにバインドします。これにより、いつ変更されたか、および何が変更されたかを各オブジェクトが認識できるように、データモデルを変更したときに UI を更新できます。JavaScript クエリー言語でクエリーし、単一エンティティまたはエンティティのバッチを保存し、クライアント上のデータをキャッシュし、カスタムメソッド、プロパティ、およびイベントによってモデルを拡張することもできます。
Breeze.js は、EntityManager を使用するデータ管理のエンティティ指向スタイルによって動作し、モデルデータにアクセスして、キャッシュします。EntityManager は、バックエンド永続性サービスのゲートウェイとローカルに作業するエンティティのキャッシュの両方の役割を果たします。EntityManager にクエリーの実行または保留中の変更の保存を指示すると、EntityManager は要求を構築し、バックエンドサービスとの通信を処理します。
Breeze.js の完全な概要、チュートリアル、マニュアル、その他については、http://www.breezejs.com/homeを参照してください。次のサンプルでは、データバインディングに対応する Knockout と Breeze.js を使用してデータを管理します。次のいくつかのな手順に従い、Wijmo で Breeze.js を簡単に使用できます。
はじめに、wijgrid ウィジェットを Knockout にバインドし、Breeze.js を使用してデータを管理する以下のサンプルを簡単に確認します。各サンプルでは、必要なファイルへの参照を追加し、ViewModel と EntityState を作成し、マークアップを作成する方法を示します。
この例では、データバインディングに対応する Knockout と Breeze.js を使用してデータを管理します。
ライブラリ参照の追加
 |
注意：: CDN wijmo-cdnから最新の依存ファイルを参照してください。 |
Wijmoウィジェットにリンクするには、以下の CDN リンクを <head> タグ内に追加します。
| リファレンス |
コードのコピー |
|---|---|
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20151.71.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20151.71.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20151.71.min.js" type="text/javascript"></script> | |
Knockout 拡張参照をアプリケーションに追加します。
| Knockout リファレンス |
コードのコピー |
|---|---|
<!--Knockout JS Library--> <script src=http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js type="text/javascript"></script> <!--Wijmo Knockout Integration Library--> <script src=http://cdn.wijmo.com/interop/knockout.wijmo.3.20151.71.js type="text/javascript"></script> | |
次は、<head>タグ内に、Breeze.jsとWijmoのBreeze.js拡張ライブラリーへの参照を追加します。
| Breeze リファレンス |
コードのコピー |
|---|---|
<!--Breeze.js References --> <script src="http://cdn.wijmo.com/external/q.js"></script> <script src="http://cdn.wijmo.com/external/breeze.min.js"></script> <script src=http://cdn.wijmo.com/interop/wijmo.data.breeze.3.20151.71.js type="text/javascript"></script> | |
CSS スタイル指定の追加
| CSS スタイル |
コードのコピー |
|---|---|
<style type="text/css"> table { border-collapse: collapse; } table caption { font-size: 150%; } th, td { border: 1px solid #AAAAAA; text-align: center; padding: 0.5em; } th { background-color: #CCCCCC; } </style> | |
ViewModel、EntityManager、および MetadataStore の作成
| ViewModel スクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript"> $.support.cors = true; function ViewModel() { var self = this; var dataService = new breeze.DataService({ serviceName: "http://demo.componentone.com/aspnet/NorthwindAPI/api/read", hasServerMetadata: false }); var ms = new breeze.MetadataStore(); self.manager = new breeze.EntityManager({ dataService: dataService, metadataStore: ms }); self.products = ko.observableArray(); self.load = function (query) { self.manager.executeQuery(query).then(function (data) { self.products(data.results); }).fail(function (e) { alert(e); }); }; </script> | |
クエリー、フィルタ、およびソートの適用
| フィルタおよびソート |
コードのコピー |
|---|---|
var allProducts = new breeze.EntityQuery("Product"); self.load(allProducts); this.filterBeverages = function () { self.load(allProducts.where("Category_ID", "eq", 1)); }; this.filterCondiments = function () { self.load(allProducts.where("Category_ID", "eq", 2)); }; this.sortId = function () { self.load(allProducts.orderBy("Product_ID")); }; this.sortPrice = function () { self.load(allProducts.orderBy("Unit_Price desc, Product_Name")); }; } | |
Knockout バインディングの適用
$(document).ready(function () { vm = new ViewModel(); ko.applyBindings(vm, $(".container").get(0)); });
マークアップの作成
| マークアップ |
コードのコピー |
|---|---|
<body class="demo-single"> <div class="container"> <div class="header"> <h2>Data - Remote Data</h2> </div> <div class="main demo"> <!-- デモマークアップの開始 --> <table> <tr> <th>Filter</th> <td> <button data-bind="click:filterBeverages">Beverages</button> <button data-bind="click:filterCondiments">Condiments</button> </td> </tr> <tr> <th>Sort</th> <td> <button data-bind="click:sortId">ID</button> <button data-bind="click:sortPrice">Price, Name</button> </td> </tr> </table> <table data-bind='wijgrid: { data: products }' /> </div> </div> </body> | |
アプリケーションを実行すると、次の図のように表示されます。
wijgrid の上にあるボタンを使用して、データをソート、フィルタ、または変更することができます。
全て展開
すべて折りたたむ