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...
Knockout-Kendo is set to depend on a
kendomodule. The easiest thing to do is pointkendoat thekendo.webfile like:kendo: kendo.web.min(in whatever directorykendo.web.min.jsis in).