【发布时间】：2013-08-30 19:15:13
【问题描述】：
所以我想同时使用requirejs、kendo ui 和knockout JS。
我阅读了 Using Kendo with RequireJS 和 Knockout JS 文章 Asynchronous Module Definition (AMD) With RequireJs，然后我通过 Knockout.js and Kendo UI - a Potent Duo 找到了 Knockout-Kendo 库，我心想 - 这太棒了 - 我即将进入一个美丽的世界彩虹、MVVM、AMD 和 HTML5 的魅力。
但现在看来，我更像是在一个充满痛苦和折磨的黑暗地下世界。这是交易...
我有一个简单的网站，其中有一个 js 文件夹，其中包含以下内容：
- jquery-2.0.3.min.js
- knockout-2.3.0.js
- 敲除-kendo.min.js
- require.js
- kendo-ui/**这里所有的剑道文件
还有一个 index.html 文件，我放在根目录中，其中包含以下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<div id="grid" data-bind="kendoGrid: items"> </div>
<script type="text/javascript">
require.config({
baseUrl : 'js',
paths: {
'jquery': 'jquery-2.0.3.min',
'knockout': 'knockout-2.3.0',
'kendo': 'kendo-ui',
'knockout-kendo': 'knockout-kendo.min',
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
define('mainViewModel', ['knockout'], function (ko) {
return function mainViewModel(){
this.items = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"}
]);
};
});
require(['jquery','knockout','mainViewModel','knockout-kendo'],
function($, ko, mainViewModel) {
ko.applyBindings(new mainViewModel());
});
</script>
</body>
</html>
据我所知，这应该基本上是正确的，但我得到了这个例外：
GET http://localhost/ko-kendo/js/kendo-ui.js [HTTP/1.1404 Not Found 1ms]
Error: Script error for: kendo
http://requirejs.org/docs/errors.html#scripterror @http://localhost/ko-kendo/js/require.js:163
似乎knockout-kendo 正在尝试加载kendo-ui.js，但不出所料，因为它不存在，所以找不到它。
为了验证映射，我敲了这个：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js"></script>
</head>
<body>
<div id="grid" data-bind="kendoGrid: items"> </div>
<script type="text/javascript">
require.config({
baseUrl : 'js',
paths: {
'jquery': 'jquery-2.0.3.min',
'knockout': 'knockout-2.3.0',
'kendo': 'kendo-ui',
'knockout-kendo': 'knockout-kendo.min',
},
shim: {
'jquery': {
exports: 'jQuery'
}
}
});
define('mainViewModel', ['knockout'], function (ko) {
return function mainViewModel(){
this.items = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"}
]);
};
});
require(['jquery','knockout','mainViewModel','kendo/kendo.grid.min'],
function($, ko, mainViewModel) {
var vm = new mainViewModel();
$(document).ready(function () {
$('#grid').kendoGrid({
dataSource: new mainViewModel().items()
});
});
ko.applyBindings(vm);
});
</script>
</body>
</html>
这非常有效（嗯，它有效） - 你可以看到两者之间的区别在于，在第二种情况下，我没有使用淘汰赛剑道，因此绑定不适用，这就是我这样做的原因kendoGrid 东西在文档准备功能中。
那么，有谁知道在这片绿色而美丽的地球上，我可以如何使用 require JS 获得击倒剑道？我觉得可能有一些花哨的垫片可以让它运行，但我无法解决......
【问题讨论】：
-
Knockout-Kendo 设置为依赖于
kendo模块。最简单的方法是将kendo指向kendo.web文件，例如：kendo:kendo.web.min（在任何目录中的 kendo.web.min.js 中）。如果您有任何问题，我很乐意提供帮助。 -
谢谢！我最初使用 kendo.web.min 文件，它运行良好，但后来我意识到我需要排序才能在带有 asp .net mvc 后端的网格中工作，因此需要包含 kendo.aspnetmvc.min。一旦我将它放入require JS，它就会开始在错误的位置寻找该事物所依赖的各种组件，因此我认为我最好使用不需要包含所有内容的方法（无论如何这更可取，因为我的页面上只有一个网格）。也许我会问一个不同的问题，关于如何在 requirejs 中使用 aspnetmvc 和 kendo.web.min ...
标签： javascript knockout.js kendo-ui requirejs knockout-kendo