jqwidgets requirejs

[maniac_1979Participant]

Hi All,

I’m having a problem to use jquery widgets in a single page environment with requirejs.

My index.html

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

my require.config.js

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'] }
    }
};

My startup.js:

define(['jquery', 'knockout', './router', 'bootstrap', 'knockout-projections', 'jqx-all'], function ($, ko, router) {

  // Components can be packaged as AMD modules, such as the following:
  ko.components.register('nav-bar', { require: 'components/nav-bar/nav-bar' });
  ko.components.register('home-page', { require: 'components/home-page/home' });

  // ... or for template-only components, you can just point to a .html file directly:
  ko.components.register('about-page', {
    template: { require: 'text!components/about-page/about.html' }
  });

ko.components.register('study-selection', { require: 'components/study-selection/study-selection' });

  // [Scaffolded component registrations will be inserted here. To retain this feature, don't remove this comment.]

  // Start the application
  ko.applyBindings({ route: router.currentRoute });
});

When trying to use :

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

The checkbox is not rendered.
I see that jqx-all.js is loaded correctly.
What am I missing?

[Peter StoevKeymaster]

Hi maniac_1979,

In order to learn how to use jQWidgets with RequireJS, please look at: JS Frameworks Integration section on our Documentation page. There are several tutorials about RequireJS. There are also Single Page APP tutorials on the documentation page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[maniac_1979Participant]

Dear Peter,

Thanks for you reply, I had already been reading the documentation. But unfortunately it doesn’t help me resolving the issue.
The problem I have is that I don’t know where to put this piece of the code, since I’m using the routing generated by yeoman.

My index.html :

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

It calls startup.js,
But then, where should I put

require(["jquery", "knockout", "app", "jqx-all"], function ($, ko, App) {
    $("#document").ready(function () {
        ko.applyBindings(new App(33));
    });
});

Obviously this part
function ($, ko, App) {
should become :

function ($, ko, router) {

Any help is highly appreciated,

Regards,

[Peter StoevKeymaster]

Hi maniac_1979,

We are not aware of “routing generated by yeoman”. This help topic – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/requirejs/requirejs_tutorial_knockout.htm illustrates how to create a widget using RequireJS and Knockout.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[maniac_1979Participant]

I finally figured it out.
It seems that I had to put :

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

In order to render a checkbox in the studyselection.js file.
Although it didn’t show this in the examples shown on the jqwidgets demo’s page.

[Author]

Posts