Kendo UI網格，Durandal

Question

我正在嘗試將Kendo UI Grid與Durandal 2.0.1結合使用，但是API調用未發送並且Grid根本沒有出現，請讓我知道我做錯了什么。

我已經按照Durandal Docs的建議實施了

Main.js

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions'
    }
});

define('jquery', function() { return jQuery; });
define('knockout', ko);

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'durandal/binder'], function (system, app, viewLocator, binder) {
    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.title = 'Durandal Starter Kit';

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true
    });

    app.start().then(function() {
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        // As per http://durandaljs.com/documentation/KendoUI/
        kendo.ns = "kendo-";
        binder.binding = function (obj, view) {
            kendo.bind(view, obj.viewModel || obj);
        };
        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

Welcome.js

define(function() {

    var vm = {
        displayName: 'Roles',
        gridOptions:{
            dataSource: roleDataSource,
            height: 700,
            toolbar: [{ name: "create", text: "Add New Role" }],
            columns: [
                { field: "Name", title: "Name" },
                { field: "Description", title: "Description" },
                { field: "Key", title: "Key" }
               ],

        }
};

    return vm;

    var roleDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://tvaiswb01/api/role/GetRoles",
                dataType: "json"
            },
            parameterMap: function (data, operation) {
                return JSON.stringify(data);
            }
        },
        batch: false,
        error: error,
        pageSize: 20,
        requestEnd: roleDataSource_requestEnd,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Name: { validation: { required: true } },
                    Description: { validation: { required: false } },
                    Key: { validation: { required: false } },
                }
            }
        }
    });

});

Welcome.html

<section>
    <h2 data-bind="html:displayName"></h2>
    <div data-kendo-bind="kendoGrid: gridOptions" id="roleGrid"></div>
</section>

Answer 1

define(function() {

    var vm = {
        displayName: 'Roles',
        dataSource: new kendo.data.DataSource({
           transport: {
             read: {
                url: "http://tvaiswb01/api/role/GetRoles",
                dataType: "json"
             },
             parameterMap: function (data, operation) {
                return JSON.stringify(data);
             }
          },
           batch: false,
           error: error,
           pageSize: 20,
           requestEnd: roleDataSource_requestEnd,
           schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Name: { validation: { required: true } },
                    Description: { validation: { required: false } },
                    Key: { validation: { required: false } },
                }
            }
         }
     });
};

    return vm;
}

在HTML中，您可以定義配置（我僅使用height，您可以定義其他配置，HTML中的事件是這樣的）

<section>
    <h2 data-bind="html:displayName"></h2>
    <div data-kendo-bind="source: dataSource"  data-kendo-height="700"  id="roleGrid" data-kendo-role='grid'></div>
</section>

編輯

如果您需要在外部定義數據源，則可以像這樣返回它，

 displayName: 'Roles',
 dataSource:roleDataSource