使用requireJS加载最新的Kendo版本的问题

Question

I'm attempting to use the latest 2016.2.504 with RequireJS, but it's not working ,I have tested with v2015.2.805 and it seems to work but can't get the same code to work with 2016.2.504,like this 我正在尝试使用最新的2016.2.504和RequireJS，但是它没有用，我已经用v2015.2.805进行了测试，它似乎工作但是无法使用相同的代码来使用2016.2.504，就像这样

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />

    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
  </head>
  <body>
   <div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
        <kendo-grid options="mainGridOptions">
            <div k-detail-template>
                <kendo-tabstrip>
                <ul>
                    <li class="k-state-active">Orders</li>
                    <li>Contact information</li>
                </ul>
                <div>
                    <div kendo-grid k-options="detailGridOptions(dataItem)"></div>
                </div>
                <div>
                    <ul>
                        <li>Country: <input ng-model="dataItem.Country" /></li>
                        <li>City: <input ng-model="dataItem.City" /></li>
                        <li>Address: {{dataItem.Address}}</li>
                        <li>Home phone: {{dataItem.HomePhone}}</li>
                    </ul>
                </div>
                </kendo-tabstrip>
            </div>
        </kendo-grid>
    </div>
</div>


    <script>
      require.config({
          waitSeconds:0,
        paths: {
          "angular": "http://kendo.cdn.telerik.com/2016.2.504/js/angular.min",
          "jquery": "http://kendo.cdn.telerik.com/2016.2.504/js/jquery.min",
          "kendo.all.min": "http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min"
        },
        shim: {
          "angular": { deps: ["jquery"] },
          "kendo.all.min": { deps: ["angular"] }
        }
      });

      require([ "angular", "kendo.all.min" ], function() {
        var app = angular.module("KendoDemos", ["kendo.directives"]);

        app.controller("controller", ["$scope", function($scope) {
          $scope.mainGridOptions = {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                    },
                    pageSize: 5,
                    serverPaging: true,
                    serverSorting: true
                },
                sortable: true,
                pageable: true,
                dataBound: function() {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
                columns: [{
                    field: "FirstName",
                    title: "First Name",
                    width: "120px"
                    },{
                    field: "LastName",
                    title: "Last Name",
                    width: "120px"
                    },{
                    field: "Country",
                    width: "120px"
                    },{
                    field: "City",
                    width: "120px"
                    },{
                    field: "Title"
                }]
            };

            $scope.detailGridOptions = function(dataItem) {
                return {
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true,
                        pageSize: 5,
                        filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                    { field: "OrderID", title:"ID", width: "56px" },
                    { field: "ShipCountry", title:"Ship Country", width: "110px" },
                    { field: "ShipAddress", title:"Ship Address" },
                    { field: "ShipName", title: "Ship Name", width: "190px" }
                    ]
                };
            };
        }]);

        angular.bootstrap(document, ["app"]);
      });
    </script>
  </body>
</html>

But,it work like this: 但是，它的工作原理如下：

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.default.min.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
  </head>
  <body>
    <div ng-controller="controller">
      <select kendo-drop-down-list k-options="options"></select>
    </div>

    <script>
      require.config({
          waitSeconds:0,
        paths: {
          "angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min",
          "jquery": "http://code.jquery.com/jquery-1.9.1.min",
          "kendo.all.min": "http://kendo.cdn.telerik.com/2016.1.406/js/kendo.all.min"
        },
        shim: {
          "angular": { deps: ["jquery"] },
          "kendo.all.min": { deps: ["angular"] }
        }
      });

      require([ "angular", "kendo.all.min" ], function() {
        var app = angular.module("app", ["kendo.directives"]);

        app.controller("controller", ["$scope", function($scope) {
          $scope.options = {
            dataSource: {
              data: [{name:"Jane Doe", value: 1}, {name:"John Doe", value: 2}]
            },
            dataTextField: "name",
            dataValueField: "value"
          };
        }]);

        angular.bootstrap(document, ["app"]);
      });
    </script>
  </body>
</html>

Please help me how I resolve this issue.Thank you so much for your help. 请帮我解决这个问题。非常感谢你的帮助。

Answer 1

app.controller("MyCtrl", ["$scope", function($scope) {

instead of 代替

app.controller("controller", ["$scope", function($scope) {

angular.bootstrap(document, ["KendoDemos"]);

instead of 代替

angular.bootstrap(document, ["app"]);

Here working example 这是工作示例

使用requireJS加载最新的Kendo版本的问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-05-31 11:52:28

使用requireJS加载最新的Kendo版本的问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-05-31 11:52:28

解决方案1
0 已采纳 2016-05-31 11:52:28