Breeze.js の wijmo.data アプリケーションへの統合

Data モジュールを使用して、Breeze.js をアプリケーションに統合できます。BreezeDataView クラスを使用して、Breeze DataService を設定し、それに wijmo.data モジュールをバインドします。この例では、Breeze.js EntityQuery を使用してデータをフェッチします。

メモ帳で、新しい HTML ページを作成するには、次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。
ドロップダウンからマークアップをコピーしてNotepad に貼り付けます
Notepad に貼り付けます.
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Notepad に貼り付けます.	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

<head> タグ内で、依存ファイル、KnockOut、および Breeze へのリンクを HTML ページに追加します。最新の依存ファイルについては、wijmo cdn にある 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.11.0/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.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.breeze.3.20173.128.js" type="text/javascript"></script> <!--Knockout JS Library--> <!-- Both of the links below can work --> <script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js" type="text/javascript"></script> <!--<script src="http://cdn.wijmo.com/amd-js/3.20173.128/knockout-3.1.0.js" type="text/javascript"></script>--> <!--Wijmo Knockout Integration Library--> <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20173.128.js" type="text/javascript"></script> <!--Breeze.js References --> <script type="text/javascript" src="http://todo.breezejs.com/Scripts/q.js"></script> <script type="text/javascript" src="http://todo.breezejs.com/Scripts/breeze.debug.js"></script>

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。

次のプロパティを持つ ViewModel を作成します。
- Breeze DataService を使用して、データソースに接続します。
- MetadataStore を設定します。製品テーブルに対応する１つの EntityType と、４つのプロパティを追加します。
- DataService と MetadataStore のための EntityManager を設定します。
- pageSize オプションを使用して、ページごとのレコード数を 10 に設定します。
- inlineCount オプションを true に設定します。
データをリフレッシュします。
ボタンクリックイベントで使用する以下の関数を設定します。
- カテゴリ ID でフィルタリングします。
- 製品 ID または価格でソートします。
- ページごとの製品数を 10 に設定するか、ページングをクリアしてすべてを表示します (0)。
- 前のページまたは次のページに移動します。
- 製品を追加または削除し、その変更をデータソースにコミットします。
- 選択された項目の価格を２倍にします。
Knockout を使用して ViewModel をコンテナにバインドします。
セッション ID をロードします。ない場合は、新しいセッション ID を作成します。

ドロップダウンからコードを貼り付けます

ViewModel スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $.support.cors = true; var viewModel; function ViewModel() { var dataService = new breeze.DataService({ serviceName: "http://demo.componentone.com/aspnet/NorthwindAPI/api/read", hasServerMetadata: false }); var ms = new breeze.MetadataStore(); var productType = new breeze.EntityType({ shortName: "Product" }); productType.addProperty(new breeze.DataProperty({ name: "Product_ID", isPartOfKey: true })); productType.addProperty(new breeze.DataProperty({ name: "Product_Name" })); productType.addProperty(new breeze.DataProperty({ name: "Category_ID" })); productType.addProperty(new breeze.DataProperty({ name: "Unit_Price" })); ms.addEntityType(productType); this.manager = new breeze.EntityManager({ dataService: dataService, metadataStore: ms }); var productView = new wijmo.data.BreezeDataView(new breeze.EntityQuery("Product"), this.manager, { pageSize: 10, inlineCount: false }); productView.refresh(); this.products = productView; this.filterBeverages = function () {productView.filter({ Category_ID: 1 });}; this.filterCondiments = function () {productView.filter({ Category_ID: 2 });}; this.sortId = function () {productView.sort("Product_ID")}; this.sortPrice = function () {productView.sort("Unit_Price desc, Product_Name");}; this.clearPaging = function () {productView.pageSize(0);}; this.setPaging = function () {productView.pageSize(10);}; this.prevPage = function () {productView.prevPage();}; this.nextPage = function () {productView.nextPage();}; this.add = function () {productView.add({ Product_ID: 100, Product_Name: "Tomato", Category_ID: 1, Unit_Price: 5 }); productView.commitEdit(); }; this.deleteCurrent = function () {productView.remove();}; this.doublePrice = function () { productView.editItem(); productView.currentEditItem().Unit_Price *= 2; productView.commitEdit(); }; this.save = function () {this.manager.saveChanges();}; } $(document).ready(function () { viewModel = new ViewModel(); ko.applyBindings(viewModel, $(".container").get(0)); }); </script>

ViewModel スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    $.support.cors = true;
    var viewModel;
   
    function ViewModel() {
        var dataService = new breeze.DataService({
            serviceName: "http://demo.componentone.com/aspnet/NorthwindAPI/api/read",
            hasServerMetadata: false
        });
        var ms = new breeze.MetadataStore();
        var productType = new breeze.EntityType({ shortName: "Product" });
        productType.addProperty(new breeze.DataProperty({ name: "Product_ID", isPartOfKey: true }));
        productType.addProperty(new breeze.DataProperty({ name: "Product_Name" }));
        productType.addProperty(new breeze.DataProperty({ name: "Category_ID" }));
        productType.addProperty(new breeze.DataProperty({ name: "Unit_Price" }));
        ms.addEntityType(productType);
   
        this.manager = new breeze.EntityManager({
            dataService: dataService,
            metadataStore: ms
        });
   
        var productView = new wijmo.data.BreezeDataView(new breeze.EntityQuery("Product"), this.manager, {
            pageSize: 10,
            inlineCount: false
        });
        productView.refresh();
   
        this.products = productView;
   
        this.filterBeverages = function () {productView.filter({ Category_ID: 1 });};
        this.filterCondiments = function () {productView.filter({ Category_ID: 2 });};
        this.sortId = function () {productView.sort("Product_ID")};
        this.sortPrice = function () {productView.sort("Unit_Price desc, Product_Name");};
        this.clearPaging = function () {productView.pageSize(0);};
        this.setPaging = function () {productView.pageSize(10);};
        this.prevPage = function () {productView.prevPage();};
        this.nextPage = function () {productView.nextPage();};
        this.add = function () {productView.add({
                Product_ID: 100,
                Product_Name: "Tomato",
                Category_ID: 1,
                Unit_Price: 5
            });
            productView.commitEdit();
        };
        this.deleteCurrent = function () {productView.remove();};
        this.doublePrice = function () {
            productView.editItem();
            productView.currentEditItem().Unit_Price *= 2;
            productView.commitEdit();
        };
        this.save = function () {this.manager.saveChanges();};
    }
   
    $(document).ready(function () {
        viewModel = new ViewModel();
        ko.applyBindings(viewModel, $(".container").get(0));
    });  
</script>

HTML ファイルの <body> セクションで、マークアップを以下を実行するマークアップに置き換えます。

ボタンを含むテーブルを作成し、ボタンクリックイベントをスクリプト内の関数にバインドします。
Grid ウィジェットを含む２つめのテーブルを作成し、データをバインドします。

ドロップダウンからコードを貼り付けます

HTML ファイルを保存し、それをブラウザで開きます。このグリッドは、実際のウィジェットで次のように表示されます。

関連トピック

概念

参照