将 durandal 与 jaydata 和 kendoui 一起使用

Question

我使用 hottowel 模板创建了一个新的 VS2012 项目，该模板反过来使用了 durandal、knockout 和微风。

我想使用 jaydata 代替微风，对于 ui 层，我想使用出色的 asKendoDataSource() 功能来为 kendoui 网格提供动力。

我按照所有说明使剑道井与杜兰达尔配合得很好。这很好。

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

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

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

这都是因为 durandal 中的模型 - viewModel 绑定是异步的，并且从一开始就需要在 viewModel 中有一个占位符属性，然后在解决 viewModel 的 activate() 方法承诺后，它会更新为绑定数据，并反过来为 viewModel 绑定到的 DOM 提供动力。

我不知道如何模仿一个空的可观察数组的 knockoutjs 实践，该数组绑定到 dom，然后（相同的确切引用）被初始化并填充 dom。似乎没有办法创建一个空的 kendo 数据源，然后由 asKendoDataSource() 方法重新初始化。将 viewModel 属性重新分配给新数据源不起作用，因为 kendo 网格已绑定到原始引用。

这是我的机场景观：

<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)" 绑定到视图模型，其中 airports 是通过 entity.asKendoDataSource() 创建的视图模型的属性不起作用。不知何故，网格没有显示数据。还有什么需要做的吗？

谢谢

Answer 1

我最好的猜测是这是一个时间问题，其中 Grid 绑定到 vm.airports 而它仍然为空，然后在它已经绑定之后调用 vm.airports = airp.asKendoDataSource();？也许尝试类似：

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