不能将 jqwidgets 与淘汰赛和 requirejs 一起使用答案

【问题标题】：Can't use jqwidgets with knockout and requirejs不能将 jqwidgets 与淘汰赛和 requirejs 一起使用
【发布时间】：2015-04-29 22:18:05
【问题描述】：

我要再试一次，我一直在尝试找到一个解决方案，在带有敲除和 requirejs 的单页应用程序中使用 jqwidgets。

我的 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 });

});

它使用同样来自 yeoman 的 router.js：

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 小部件时，它们不会呈现。学习选择.html：

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

学习选择.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 上的示例但我无法找到解决我的问题的方法。有没有办法调试这个？我错过了什么吗？

非常感谢任何帮助。

亲切的问候，

【问题讨论】：

你使用过 ko.applyBindings 吗？
是的，绑定没有问题。

标签： knockout.js requirejs jquery-widgets

【解决方案1】：

我终于明白了。看来我不得不说：

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

为了在 studyselection.js 文件中呈现一个复选框。虽然它没有在 jqwidgets 演示页面上显示的示例中显示这一点。

【讨论】：