2

所以我想同时使用requirejs、kendo ui和knockout JS。

我阅读了 Using Kendo with RequireJS和 Knockout JS 文章Asynchronous Module Definition (AMD) With RequireJs然后我通过 Knockout.js 和 Kendo UI 找到了Knockout-Kendo库- 一个强大的二重奏，我心想 - 这太棒了 - 我'即将进入一个充满彩虹、MVVM、AMD 和 HTML5 的美丽世界。

但现在看来，我更像是在一个充满痛苦和折磨的黑暗地下世界。这是交易...

我有一个简单的网站，其中有一个js文件夹，里面有以下内容：

  • jquery-2.0.3.min.js
  • 淘汰赛-2.3.0.js
  • 淘汰赛-kendo.min.js
  • 需要.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 获得击倒剑道？我觉得可能有一些花哨的垫片可以让它运行，但我无法解决......

4

1 回答 1

1

Knockout-Kendo 设置为依赖于一个kendo模块。最简单的方法是指向文件，例如：（kendo在任何目录中）。kendo.webkendo: kendo.web.minkendo.web.min.js

于 2013-08-30T11:15:13.280 回答