在durandal(使用hottowel模板)绑定到MVVM网格的KendoUI DataSource似乎不起作用

时间:2013-06-15 20:55:24

标签: kendo-ui durandal hottowel jaydata

我正在使用Visual Studio 2012 Update 2 hottowel模板以及更新的durandal和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>

我在Chrome的网络监视器中看到了对jaystack的通话: 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创建的数据源)

如果没有durandal,这很有效,如下所示: http://jsfiddle.net/t316/4n62B/29/

我一直在努力尝试2天 - 有人可以帮帮我吗?

由于 TJ

2 个答案:

答案 0 :(得分:2)

在删除了微风所需的部件之后,现在一切正常。

尽管如此,我建议稍微重组工作dFiddle code以确保在vm中设置vm.airports之前定义a)activate并且b)不需要创建一个虚假的vm.airports kendo.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);
    }

});

答案 1 :(得分:0)

你使用jQuery上的哪个版本?尝试使用1.8.3或1.9 +迁移。 在Chrome中,将停止标志切换为紫色(两次点击)以捕获未捕获的异常并查看是否有任何异常。