0

hottowel テンプレートを使用して、新しい VS2012 プロジェクトを作成しました。これは、代わりに durandal、knockout、および Breeze を使用します。

私はそよ風の代わりに jaydata を使用したいと思います。UI レイヤーには、優れた asKendoDataSource() 機能を使用して kendoui グリッドを強化したいと考えています。

ケンドウイをデュランダルとうまく連携させるために、すべての指示に従いました。これで問題ありません。

jaydata エンティティを取得して asKendoDataSource() を実行するモデルがあります。私のビューは、asKendoDataSource() への参照を含むビューモデルのプロパティに設定されたソース プロパティを持つ MVVM 宣言された kendoui グリッドです。

ノックアウトの世界では、viewModel プロパティは空の entities = ko.observableArray() になり、データ サービスが戻るときにエンティティ (値) を使用して初期化されます。

データが jaydata から返されたときに asKendoDataSource() 変換によって初期化される空の剣道データソースである viewModel プロパティを持つように、これを模倣する必要があります。このようにして、mvvm 剣道グリッドは最初に空のデータソースにバインドされ、asKendoDataSource() が呼び出されたときにそのアイテムを受け取ります。

これはすべて、モデル - durandal の viewModel バインディングが非同期であり、最初から viewModel にプレースホルダー プロパティが必要であり、viewModel の activate() メソッドの promise が解決された後、バインドされたデータで更新され、代わりに、viewModel がバインドされている DOM を強化します。

Domにバインドされた空の監視可能な配列のknockoutjsの実践を模倣する方法を理解できず、(まったく同じ参照)初期化されてdomにデータが入力されます。asKendoDataSource() メソッドによって再初期化される空の剣道データソースを作成する方法はないようです。剣道グリッドが元の参照にバインドされているため、viewModel プロパティを新しいデータ ソースに再割り当てしても機能しません。

これは私の空港ビューです：

<section>
    <h2 class="page-title" data-bind="text: title"></h2>
    <div id="airportGrid" data-kendo-role="grid" data-kendo-sortable="true" data-kendo-pageable="true" data-kendo-page-size="25" data-kendo-editable="true" data-kendo-columns='["Id", "Abbrev", "Name"]' data-kendo-bind="source: airports"></div>    
</section>

これは私のデータコンテキストです:

define([
    'durandal/system',
    'services/logger'],
    function (system, logger) {


        var getAirports = function (airportsObservable) {
            $data.Entity.extend("Airport", {
                Id: { type: "int", key: true, computed: true },
                Abbrev: { type: String, required: true, maxLength: 200 },
                Name: { type: String, required: true, maxLength: 512 }
            });

            $data.EntityContext.extend("JumpSeatDatabase", {
                Airports: { type: $data.EntitySet, elementType: Airport }
            });

            var airportDB = new AirportDatabase('http://localhost:2663/odata');
            var deferred = Q.defer();
            airportDB.onReady(function () {
                deferred.resolve(airportDB.Airports);
            });

            return deferred.promise;
        }
        var datacontext = {
            getAirports: getAirports
        };

        return datacontext;

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

        function logError(msg, error) {
            logger.logError(msg, error, system.getModuleId(datacontext), true);
        }
        //#endregion
});

これは私の空港ビューモデルです:

define(['services/datacontext', 'durandal/plugins/router'],
    function (datacontext, router) {
        var airports = null;// = kendo.data.ObservableArray([]);

        var activate = function () {
            var airportRes = datacontext.getAirports();
            return airportRes.then(function (airp) {
                vm.airports = airp.asKendoDataSource();
            });
        };

        var deactivate = function() {
            //airports([]);
        };

        var viewAttached = function (view) {
            //using this type of reach in to the viewModel is considered bad practice in durandal
            //$('#airportGrid').kendoGrid({
            //    dataSource: airports.asKendoDataSource({ pageSize: 10 }),
            //    filterable: true,
            //    sortable: true,
            //    pageable: true,
            //    height: 500,
            //    columns: ['Id', 'Abbrev', 'Name']
            //});
            //kendo.init($("#container"));
            kendo.bind(view, vm);//this should eventually go away the recommended ViewModelBinder code in main.js is not firing for me
        };


        var vm = {
            activate: activate,
            deactivate: deactivate,
            airports: airports,
            title: 'Airports',
            viewAttached: viewAttached
        };
        return vm;
    });

私が見ている最後の問題: MVVM は kendoui グリッドを宣言し、data-kendo-bind={source: airports)" を介してビュー モデルにバインドされているように思えます。ここで、空港はエンティティを介して作成されたビューモデルのプロパティです。 .asKendoDataSource() が機能しない. どういうわけかグリッドにデータが表示されない. 何か追加する必要がありますか?

ありがとう

4

1 に答える 1

0

私の最善の推測は、これはタイミングの問題であり、グリッドがvm.airportsまだnullのときにvm.airports = airp.asKendoDataSource();バインドされ、すでにバインドされた後に呼び出されるということですか? おそらく次のようなものを試してください：

return airportRes.then(function (airp) {
    vm.airports.data(airp.asKendoDataSource().data());
});
于 2013-06-15T02:41:20.860 に答える