Использование дюрандала с джайдатой и кэндуем

Question

Я создал новый проект VS2012, используя шаблон hottowel, который в свою очередь использует durandal, knockout и breeze.

Я хочу использовать jaydata вместо breeze, а для слоя пользовательского интерфейса я хочу использовать отличную функциональность asKendoDataSource() для питания сетки кэндуи.

Я следовал всем инструкциям, чтобы заставить кендоуи хорошо работать с Дюрандалем. Это отлично.

У меня есть модель, в которой я получаю сущности jaydata и запускаю на нем asKendoDataSource(). На мой взгляд, объявленная MVVM сетка Кендоуи со свойством source установлена ​​на свойство viewmodel, которое содержит ссылку на asKendoDataSource().

В мире нокаута свойство viewModel будет пустым entity = ko.observableArray(), которое затем будет инициализировано с использованием entity (values) при возврате службы данных.

Мне нужно имитировать это так, что у меня есть свойство viewModel, которое является пустым источником данных кендо, который затем инициализируется преобразованием asKendoDataSource(), когда данные возвращаются из jaydata. Таким образом, сетка кендо mvvm сначала привязывается к пустому источнику данных, а затем получает его элементы при вызове asKendoDataSource().

Это все из-за того, что привязка модель - viewModel в durandal является асинхронной, и в viewModel должно быть свойство заполнителя с самого начала, которое затем, после того, как разрешается метод метода viewModel activ (), обновляется со связанными данными и взамен включает DOM, с которым связана viewModel.

Я не могу понять, как имитировать практику knockoutjs пустого наблюдаемого массива, который привязан к dom, а затем (тот же точный эталон) инициализируется и заполняет 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 объявил сетку Кендоуи, привязанную к модели представления через data-kendo-bind={source: airport)", где airport - это свойство модели представления, созданной с помощью сущностей.asKendoDataSource() не работает. Каким-то образом сетка не показывает данные. Есть ли что-то еще, что нужно сделать?

Спасибо

Answer 1

Мое лучшее предположение состоит в том, что это проблема времени, когда Grid привязан к vm.airports в то время как это все еще нуль, тогда vm.airports = airp.asKendoDataSource(); называется после того, как он уже связан? Возможно, попробуйте что-то вроде:

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