【发布时间】：2016-05-31 03:02:53
【问题描述】：
我正在尝试将最新的 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>
但是，它是这样工作的：
<!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>
请帮助我如何解决此问题。非常感谢您的帮助。
【问题讨论】：
标签： javascript angularjs kendo-ui telerik requirejs