Невозможно использовать jqwidgets с нокаутом и requirejs

Question

Я попробую еще раз, я пытался найти решение для использования jqwidgets в одностраничном приложении с нокаутом и requirejs.

Мой index.html:

<script src="app/require.config.js"></script> 
<script data-main="app/startup" src="bower_modules/requirejs/require.js"/> 

Мои require.config.js (в основном, порожденные Yeoman):

var require = { 
baseUrl: ".", 
paths: { 
    "bootstrap":   "bower_modules/components-bootstrap/js/bootstrap.min", 
    "crossroads":   "bower_modules/crossroads/dist/crossroads.min", 
    "hasher":    "bower_modules/hasher/dist/js/hasher.min", 
    "jquery":    "bower_modules/jquery/dist/jquery", 
    "knockout":    "bower_modules/knockout/dist/knockout", 
    "jqxknockout":   "bower_modules/jqwidgets/jqwidgets/jqxknockout", 
    "jqx-all":    "bower_modules/jqwidgets/jqwidgets/jqx-all", 
    "knockout-projections": "bower_modules/knockout-projections/dist/knockout-projections", 
    "mapping":    "bower_modules/bower-knockout-mapping/dist/knockout.mapping", 
    "signals":    "bower_modules/js-signals/dist/signals.min", 
    "text":     "bower_modules/requirejs-text/text" 
}, 
shim: { 
    "bootstrap": {export: "$", deps: ["jquery", "mapping", 'jqx-all'] } 
} 
}; 

Мои startup.js (названный index.html)

define(['jquery', 'knockout', './router', 'bootstrap', 'knockout-projections', 'jqx-all'], function ($, ko, router) { 
ko.components.register('nav-bar', { require: 'components/nav-bar/nav-bar' }); 
ko.components.register('home-page', { require: 'components/home-page/home' }); 
ko.components.register('study-selection', { require: 'components/study-selection/study-selection' }); 
ko.applyBindings({ route: router.currentRoute }); 

}); 

Он использует router.js, который также поступает от yoman:

return new Router({ 
    routes: [ 
     { url: '', params: { page: 'home-page' } }, 
     { url: 'study-selection', params: { page: 'study-selection' } } 
    ] 
}); 

function Router(config) { 
    var currentRoute = this.currentRoute = ko.observable({}); 

    ko.utils.arrayForEach(config.routes, function(route) { 
     crossroads.addRoute(route.url, function(requestParams) { 
      currentRoute(ko.utils.extend(requestParams, route.params)); 
     }); 
    }); 

    activateCrossroads(); 
} 

function activateCrossroads() { 
    function parseHash(newHash, oldHash) { crossroads.parse(newHash); } 
    crossroads.normalizeFn = crossroads.NORM_AS_OBJECT; 
    hasher.initialized.add(parseHash); 
    hasher.changed.add(parseHash); 
    hasher.init(); 
} 

});

Всякий раз, когда я открываю страницу индекса, я вижу, что загружается jqx-all. Однако, когда я пытаюсь использовать виджеты jquery на любой странице, они не отображаются. исследование-selection.html:

<div id="jqxCheckBox" data-bind="jqxCheckBox: { checked: checked, disabled: disabled, width: '120px' }" style='margin-bottom: 10px;'>jqxCheckBox</div> 

исследование-selection.js:

define(['knockout', 'text!./study-selection.html'], function (ko, templateMarkup) { 


function Studyselection(params) { 

    this.message = ko.observable('Hello from the studySelection1 component!'); 
    this.disabled = ko.observable(false); 


    } 
    return { viewModel: Studyselection, template: templateMarkup }; 

}); 

Я просматривал примеры на http://www.jqwidgets.com/jquery-widgets-documentation/documentation/requirejs/requirejs_tutorial_knockout.htm Но я не могу найти решение моей проблемы. Есть ли способ отладки этого? Я что-то упустил?

Любая помощь очень ценится.

С уважением,

Answer 1

Я, наконец, понял это. Кажется, что я должен был поставить:

$('#jqxcheckbox').jqxCheckBox({ width: 120, height: 25 }); 

Для того, чтобы сделать флажок в файле studyselection.js. Хотя это не показано в примерах, приведенных на странице демонстрации jqwidgets.