javascript - RequireJS, KendoUI and KnockoutJS any chance in them working together? -
so want use requirejs, kendo ui , knockout js together.
i read using kendo requirejs , knockout js article asynchronous module definition (amd) requirejs , found knockout-kendo library via knockout.js , kendo ui - potent duo , thought myself - awesome - i'm in beautiful world of rainbows, mvvm, amd , html5 lusciousness.
but seems more i'm in dark underground world of pain , suffering. here's deal...
i have simple web site has js folder has following inside:
- jquery-2.0.3.min.js
- knockout-2.3.0.js
- knockout-kendo.min.js
- require.js
- kendo-ui/** kendo files under here
and index.html file have put in 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 can fathom, should correct getting 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 knockout-kendo trying load kendo-ui.js it, unsurprisingly since doesn't exist, can't find it.
in attempt verify mappings knocked 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, worked) - can see difference between 2 in second case not using knockout-kendo , therefore, binding not apply, why kendogrid thing in document ready function.
so, know how on green , beautiful earth can knockout-kendo working require js? feel there might fancy shim going can't work out...
knockout-kendo set depend on kendo module. easiest thing point kendo @ kendo.web file like: kendo: kendo.web.min (in whatever directory kendo.web.min.js in).
Comments
Post a Comment