Kendo UI Grid，Durandal

Question

我正在嘗試在Durandal 2.0.1上使用Kendo UI Grid，但是API調用不發送，Grid並沒有出現，請讓我知道我是否做錯了什麼。

我已經實現了由迪朗達爾文檔

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，（我只用高度，您可以在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