KendoUI DataSource связывания с MVVM сетки в Дюрандала (используя шаблон hottowel) не похоже на работу

Question

Я использую Visual Studio 2012 Обновление шаблона 2 hottowel с обновленным Дюрандала и Jquery пакетов NuGet ...

Вот мой код : Durandal main.js:

require.config({ 
    paths: { "text": "durandal/amd/text" } 
}); 

define(['durandal/app', 'durandal/viewLocator', 'durandal/viewModelBinder', 'durandal/system', 'durandal/plugins/router', 'services/logger'], 
    function (app, viewLocator, viewModelBinder, system, router, logger) { 

    // Enable debug message to show in the console 
    system.debug(true); 

    app.start().then(function() { 
     toastr.options.positionClass = 'toast-bottom-right'; 
     toastr.options.backgroundpositionClass = 'toast-bottom-right'; 

     router.handleInvalidRoute = function (route, params) { 
      logger.logError('No Route Found', route, 'main', true); 
     }; 

     // When finding a viewmodel module, replace the viewmodel string 
     // with view to find it partner view. 
     router.useConvention(); 
     viewLocator.useConvention(); 

     // Adapt to touch devices 
     app.adaptToDevice(); 

     kendo.ns = "kendo-"; 
     viewModelBinder.beforeBind = function (obj, view) { 
      kendo.bind(view, obj.viewModel || obj); 
     }; 
     //Show the app by setting the root view model for our application. 
     app.setRoot('viewmodels/shell', 'entrance'); 
    }); 
}); 

Durandal ViewModel:

define(['services/datacontext', 'durandal/plugins/router'], 
    function (datacontext, router) { 


     var activate = function() { 
      //yes yes - I will separate this out to a datacontext - it is here for debugging simplicity 
      var service = $data.initService("https://open.jaystack.net/c72e6c4b-27ba-49bb-9321-e167ed03d00b/6494690e-1d5f-418d-adca-0ac515b7b742/api/mydatabase/"); 
      //return promise as durandal seems to want... 
      return service.then(function (db) { 
       vm.set("airports", db.Airport.asKendoDataSource()); 
      }); 

     }; 



     var deactivate = function() { 
     }; 

     var viewAttached = function (view) { 
      //kendo.init($("#airportGrid")); 
      //kendo.bind(view, vm); 
      //kendo.bind($("#airportGrid"), vm); 
     }; 

     var vm = new kendo.data.ObservableObject({ 
      activate: activate, 
      deactivate: deactivate, 
      airports: [], 
      title: 'Airports', 
      viewAttached: viewAttached 
     }); 

     return vm; 
    }); 

Durandal вид:

<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> 

Я вижу призыв к тому, чтобы jaystack в сети монитора в Chrome: https://open.jaystack.net/c72e6c4b-27ba-49bb-9321-e167ed03d00b/6494690e-1d5f-418d-adca-0ac515b7b742/api/mydatabase//Airport?$inlinecount=allpages&$top=25 И я вижу, данные возвращаются.

Сетка kendoui создана хорошо, но в ней нет данных (я думаю, что это означает, что kendoui счастлив и привязки MVVM привязаны, однако созданная сетка kendoui, похоже, не хочет понимать источник данных kendoui создано из jaydata)

Без Дюрандали это работает так же хорошо, как показано в: http://jsfiddle.net/t316/4n62B/29/

Я пытался и пытаюсь в течение 2 дней, теперь - может кто-то пожалуйста, помогите мне?

Благодаря TJ

Answer 1

Какую версию на JQuery вы используете? Попробуйте с 1.8.3 или 1.9 + миграцией. В Chrome переключите знак остановки на фиолетовый (два клика), чтобы поймать неперехваченные исключения и посмотреть, есть ли они.

Answer 2

Кажется, что все работает сейчас после удаления деталей, которые требуются только от бриза.

Тем не менее, я хотел бы предложить реструктуризации рабочего dFiddle code немного, чтобы гарантировать, что а) vm определяется перед установкой vm.airports в activate и б) нет необходимости создавать фиктивную vm.airportskendo.data.DataSource(), который получает перезаписаны в activate все равно.

define(function() { 

    var vm = new kendo.data.ObservableObject({ 
     activate: activate, 
     deactivate: deactivate, 
     // airports: new kendo.data.DataSource(), 
     title: 'Airports', 
     viewAttached: viewAttached 
    }); 

    return vm; 

    function activate() { 
     var service = $data.initService("https://open.jaystack.net/c72e6c4b-27ba-49bb-9321-e167ed03d00b/6494690e-1d5f-418d-adca-0ac515b7b742/api/mydatabase/"); 
     return service.then(function(db) { 
      vm.airports = db.Airport.asKendoDataSource(); 
     }); 

    } 

    function deactivate() { 
    } 

    function viewAttached (view) { 
     //kendo.init($("#airportGrid")); 
     //kendo.bind(view, vm); 
     //kendo.bind($("#airportGrid"), vm); 
    } 

});