Question

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

我想使用jaydata而不是breeze，对于ui层，我想使用优秀的asKendoDataSource（）功能为kendoui网格提供动力。

我按照所有指示使kendoui与durandal一起工作。这很好。

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

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

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

这都是因为durandal中的模型 - viewModel绑定是异步的，并且从一开始就需要在viewModel中有一个占位符属性，然后，在解析viewModel的activate（）方法promise之后，使用绑定数据和返回的权限是viewModel绑定的DOM。

我无法弄清楚如何模仿一个空的可观察数组的敲击实践，该数组绑定到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>

这是我的datacontext：

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）绑定到视图模型，其中机场是通过entities.asKendoDataSource（）创建的viewmodel的属性不起作用。不知何故，网格没有显示数据。是否需要做一些额外的工作？

由于

Answer 1

我最好的猜测是，这是一个计时问题，Grid在绑定到vm.airports时仍然为null，然后vm.airports = airp.asKendoDataSource();在绑定后被调用？也许尝试类似的事情：

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

使用durandal与jaydata和kendoui

1 个答案: