相关疑难解决方法(0)

我正在使用requirejs + jquery + jqueryui.我已经阅读了很多关于如何做到这一点的例子.我想我了解各种方法,在我看来,我的设置应该正常工作.但是,我偶尔会在依赖于jquery-ui的自定义模块中获得$ .widget未定义的错误.这是一种痛苦,因为它不一致且难以复制,因此我很难测试其他方法.

我没有填充所有的jquery插件,因为有很多.相反,我正在使用单独的requirejs调用加载jquery.然后,在回调中,我加载其余的东西.这样我就不必维护所有jquery插件的填充程序列表.

对于jquery-ui,我使用垫片使其依赖于jquery.然后我使用小部件工厂的所有自定义模块在其依赖项列表中都有"jquery-ui".

在我的模板中......

requirejs.config({
    baseUrl: ATHLETE.siteConfig.jsBaseUrl,
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
        'jquery-ui': '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min'
    },
    shim: {
        "jquery-ui": ['jquery']
    },
    waitSeconds: 15
});

requirejs(['jquery'], function($) {
    requirejs(['site'], function() {
        requirejs(['mypage']);
    });
});

请注意,我在mypage.js之前加载site.js. 他们有一些共享的依赖项.在我的构建配置中,我从mypage.js中排除了site.js,因此共享依赖项被编译到site.js而不是mypage.js.因此,我需要在加载mypage.js之前完全加载site.js,否则require可能会尝试单独加载这些共享依赖项.

这是我的一个示例自定义模块,它依赖于jquery-ui.

define([
    'jquery',
    'jquery-ui'
],function($) {
    $.widget('ui.viewAllSponsorsWidget', $.ui.dialog, {
        options: {
            autoOpen: false,
            dialogClass: 'view-all-sponsor-dialog-wrap',
            draggable: false,
            modal: true,
            resizable: false,
            width: 370,
            height: 400
        }
    });
});

错误$ .widget未定义是由此的第5行和我的类似自定义模块引起的.再次,它真的不一致,很难再现.通常情况下,即使清除缓存,我也不会收到错误.任何人都可以想到在jquery-ui完全加载之前第5行可能会被执行的方式吗？

更新2013年8月16日

我已经能够跟踪这一点了.我创建了一个依赖于jquery和jquery-ui的简单模块.

define([
    'jquery',
    'jquery-ui'
],function($) {
    console.log('$.widget is …

我们第一次使用requirejs,而我在构建依赖项时遇到了麻烦.

我已将我的主app.js文件定义为index.html中的data-main属性:

<script data-main="src/app" src="/js/lib/require/require.js"></script>

但是,我有一个文件定义了我所有需要的路径/填充程序配置,我希望它在app.js文件之前运行.我需要它运行,以便我可以在我的app.js中引用配置的路径作为依赖项.

我认为正确的方法是将我的config.js作为数据主.我尝试将config.js设置为依赖,如下所示:

   <script type="text/javascript">
        var require = {
            baseUrl: "/",
            deps: ["src/config"]
        }
    </script>
    <!-- data-main is the main js file of the app -->
    <script data-main="src/app" src="/js/lib/require/require.js"></script>

但这没有帮助.

有什么建议？

我的项目包括以下文件:

./index.html
./js/main.js
./js/vendor/require.js
./js/viewmodel/vm.js

将index.html具有以下相关片段:

<script data-main="js/main.js" src="js/vendor/require.js"></script>
<script type="text/javascript">
    require(['viewmodel/vm', 'ko'], 
        function(viewmodel, ko) {
            ko.applyBindings(viewmodel);
        }
    );
</script>

该js/main.js文件如下:

var root = this;
define('jquery', ['http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js'], function () { return root.$; });
define('ko', ['http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js'], function (ko) { return ko; });

该js/viewmodel/vm.js文件...

define(['jquery', 'ko'], 
    function($, ko) {
        return {
            subject: 'world',
            greeting: 'hello'
        }
    }
);

当您打开浏览器到index.html时,浏览器会尝试加载一个名为js/ko.js而不是使用中定义的模块的文件main.js.似乎data-main属性指向的js文件不能保证在依赖项解析之前运行.这对我来说似乎不正确,因为data-main js文件的一个目的是定义require配置(即path,shim等).我使用的是必需的v2.1.2.

如果我将我的main.js文件的内容复制到脚本块中,这完全正常index.html.通过"完全正常"我的意思是它解决了ko作为一个模块并找到适当的CDN链接来解析ko而不是尝试下载./js/ko.js.