Kendo-UI components when using Durandaljs

Question

I'm spent days trying to work out how to use the kendo-ui component with Durandal but to no avail.

I've managed to add a kendo-ui component declaratively on the page i.e. . This has no problems. However, I would like to do some animations based on page events. Coding directly in the javascript viewmodel makes it easier to manipulate afterwards.

I've added my code below (which doesn't work), and I'm not sure that I'm taking the right approach. Actually, I'm sure I'm not. Anyone who can point me in the right direction I would appreciate it.

Any help or suggestions are welcome

Main.js

requirejs.config({
paths: {
    'text': '../lib/require/text',
    'durandal':'../lib/durandal/js',
    'plugins': '../lib/durandal/js/plugins',
    'transitions' : '../lib/durandal/js/transitions',
    'jquery': '../lib/jquery/jquery-1.9.1',
    'kendo': '../lib/kendo/kendo.ui.core.min',
    'knockout': '../lib/knockout/knockout-3.1.0',
    'bootstrap': '../lib/bootstrap/js/bootstrap',
    'toastr': '../lib/toastr/toastr',
    'lib': '../lib'  
},
shim: {
    'kendo': { deps: ['jquery'], exports: 'kendo' },
    'bootstrap': {deps: ['jquery'],exports: 'jQuery'}
}
});

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'durandal/binder', 'kendo'],  function (system, app, viewLocator, binder, kendo) {

app.title = 'My Jumpstart';

//specify which plugins to install and their configuration
app.configurePlugins({
    router:true,
    dialog: true,
    widget: {
        kinds: ['expander']
    }
});

kendo.ns = "kendo-";
binder.binding = function (obj, view) {
    kendo.bind(view, obj.viewModel || obj);
};

app.start().then(function () {
    viewLocator.useConvention();
    app.setRoot('shell');
});
});

index.js

define(['durandal/app', 'durandal/system', 'knockout', 'toastr', 'kendo'], 
function (app, system, ko, toastr, kendo) {

var myButton = function () {
    var kbutton = $("#myButton").kendoButton();
     };

var vm = {
     myButton: myButton
};

return vm;
});

index.html

<section>
        <div id="myButton">My Kendo Button</div>
</section>

Answer 1

Instead of shimming, add the Kendo libraries via the <script> tag on your index.html page. Be sure to add it after jQuery.

Also, are you using the knockout-kendo library from Ryan Niemeyer? That would affect my answer.