KendoUI DataSource binding to MVVM grid in durandal (using hottowel template) doesn't seem to work

Question

I am using Visual Studio 2012 Update 2 hottowel template with updated durandal and jquery nuget packages...

Here is my code: 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 view:

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

I see the call being made to jaystack in Chrome's network monitor: https://open.jaystack.net/c72e6c4b-27ba-49bb-9321-e167ed03d00b/6494690e-1d5f-418d-adca-0ac515b7b742/api/mydatabase//Airport?$inlinecount=allpages&$top=25 And I see data coming back.

The kendoui grid is created nicely but there is no data in it (I think this means kendoui is happy and the MVVM bindings are being bound to, however the created kendoui grid doesn't seem to want to understand the kendoui datasource created from jaydata)

Without durandal this works just nicely as demonstrated in: http://jsfiddle.net/t316/4n62B/29/

I have been trying and trying for 2 days now - can someone please help me out?

Thanks TJ

Answer 1

Sounds like everything is working now after removing the parts that are only required by breeze.

Nevertheless I'd suggest restructuring the working dFiddle code slightly to ensure that a) vm is defined before setting vm.airports in activate and b) there's no need to create a dummy vm.airports kendo.data.DataSource() that gets overwritten in activate anyway.

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);
    }

});

Answer 2

Which version on jQuery do you use? Try with 1.8.3 or 1.9 + Migration. In Chrome switch the stop sign to purple (two clicks) to catch uncaught exceptions and see if there is any.