将durandal与jaydata和kendoui一起使用

Question

我创建了一个新的VS2012项目使用热毛巾模板，作为回报，使用Durandal，淘汰赛和微风。

我想使用jaydata而不是微风，对于ui层，我想使用出色的asKendoDataSource（）功能来为kendoui网格供电。

我按照所有的指示，使kendoui工作良好的杜兰达尔。这很好。

我有一个模型，在这个模型中，我获取jaydata实体并在其上运行asKendoDataSource（）。“我的视图”是一个MVVM声明的kendoui网格，其源属性设置为viewmodel的属性，该属性包含对asKendoDataSource（）的引用。

在淘汰赛世界中，viewModel属性将是一个空实体=ko.observableArray（），然后在数据服务返回时使用实体（值）初始化。

我需要模拟这一点，这样我就有了一个viewModel属性，它是一个空的kendo数据源，然后当数据从jaydata返回时，由asKendoDataSource（）转换初始化。这样，mvvm剑道网格最初绑定到空数据源，然后在调用asKendoDataSource（）时接收其项。

这都是因为durandal中的model-viewModel绑定是异步的，并且从一开始就需要在viewModel中有一个占位符属性，然后在解决viewModel的activate（）方法promise后，该占位符属性将使用绑定的数据进行更新，并反过来为viewModel绑定到的DOM提供电源。

我不知道如何模仿Knockoutjs的做法，一个空的可观察数组绑定到dom，然后（相同的确切引用）被初始化并填充dom。似乎没有办法创建空的kendo数据源，然后由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网格，通过数据kendo bind={source:airports）“绑定到视图模型，其中airports是通过entities.asKendoDataSource（）创建的viewmodel的属性不起作用。不知何故，网格没有显示数据。是否需要做一些额外的工作？

谢啦

Answer 1

我最好的猜测是这是一个时间问题，网格绑定到vm。机场仍为空，然后是vm。机场。asKendoDataSource（） 已绑定后是否调用？或许可以尝试以下方式：

return airportRes.then(function (airp) {
    vm.airports.data(airp.asKendoDataSource().data());
});