RequireJS,KendoUI和KnockoutJS有机会一起工作吗?

时间:2013-08-28 10:11:34

标签: javascript knockout.js kendo-ui requirejs knockout-kendo

所以我想一起使用requirejskendo uiknockout JS

我阅读了Using Kendo with RequireJS和Knockout JS文章Asynchronous Module Definition (AMD) With RequireJs,然后我通过Knockout-Kendo找到了Knockout.js and Kendo UI - a Potent Duo库,我想我自己 - 这太棒了 - 我是即将进入一个美丽的彩虹世界,MVVM,AMD和HTML5的情感。

但现在看起来更像是在一个痛苦和痛苦的黑暗地下世界。这是交易......

我有一个简单的网站,其中包含 js 文件夹,其中包含以下内容:

  • 的jquery-2.0.3.min.js
  • 敲除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>

这非常有效(好吧,它有效) - 你可以看到两者之间的区别在于,在第二种情况下,我没有使用knockout-kendo,因此,绑定不适用,这就是为什么我这样做文件就绪函数中的kendoGrid事物。

那么,有没有人知道如何在这个绿色和美丽的地球上我可以得到淘汰剑道使用需要JS?我觉得可能有一些花哨的东西可以让它继续下去,但我无法解决它...

1 个答案:

答案 0 :(得分:1)

Knockout-Kendo设置为依赖于kendo模块。最简单的方法是在kendo文件中指出kendo.web,例如:kendo: kendo.web.min(在kendo.web.min.js所在的目录中)。