RequireJS, KendoUI and KnockoutJS any chance in them working together?

StackOverflow https://stackoverflow.com/questions/18485019

Pregunta

So I want to use requirejs, kendo ui and knockout JS together.

I read Using Kendo with RequireJS and the Knockout JS article Asynchronous Module Definition (AMD) With RequireJs and then I found the Knockout-Kendo library via Knockout.js and Kendo UI - a Potent Duo and I thought to myself - this is awesome - I'm about to be in a beautiful world of rainbows, MVVM, AMD and HTML5 lusciousness.

But now it seems more like I'm in a dark underground world of pain and suffering. Here's the deal...

I have a simple web site that has a js folder that has the following inside:

  • jquery-2.0.3.min.js
  • knockout-2.3.0.js
  • knockout-kendo.min.js
  • require.js
  • kendo-ui/** all the kendo files under here

and an index.html file that I have put in the root containing this:

<!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>

As far as I can fathom, that should be basically correct but I am getting this exception:

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

Seems that knockout-kendo is trying to load up kendo-ui.js but it, unsurprisingly since it doesn't exist, can't find it.

In an attempt to verify the mappings I knocked up this:

<!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>

That worked fabulously (well, it worked) - you can see that the difference between the two is that in the second case I am not using knockout-kendo and therefore, the binding does not apply, which is why I do that kendoGrid thing in the document ready function.

So, does anyone know how on this green and beautiful earth I can get knockout-kendo working with require JS? I feel like there might be something fancy with a shim that would get it going but I can't work it out...

¿Fue útil?

Solución

Knockout-Kendo is set to depend on a kendo module. The easiest thing to do is point kendo at the kendo.web file like: kendo: kendo.web.min (in whatever directory kendo.web.min.js is in).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top