如何使用RequireJS在我的模块化backbone.js应用程序中包含jQueryUI?

时间:2012-04-19 21:53:49

标签: jquery-ui backbone.js requirejs

我想在使用RequireJS的backbone.js应用程序中包含jQueryUI。 index.html中包含的main.js文件如下:

require.config({
    paths: {
            jquery: 'libs/jquery/jquery-1.7.2.min',
            jqueryui: 'libs/jquery/jquery-ui-1.8.18.custom.min',
            underscore: 'libs/underscore/underscore-min',
            backbone: 'libs/backbone/backbone-optamd3-min',
            text: 'libs/require/text',
            templates: 'templates'
       }

});

require(['app'], function(App){
    App.start();
});

对于每个模型/视图/路由器文件,我只是在“define”块的开头包含'jquery'命名空间,如下所示:

define([
    'jquery',
    'underscore',
    'backbone',
    'views/categoryview',
    'text!templates/category.html'
    ], function($, _, Backbone, CategoryView, categoryTemplate){
        // Here comes my code
});

但是jQueryUI无法在这些文件中使用。我的代码有问题吗?或者我是否还应在每个“定义”块中包含“jqueryui”?但是如果我在“define”块中包含“jqueryui”,我应该如何在函数中命名它以避免名称与jquery冲突?

4 个答案:

答案 0 :(得分:4)

虽然kujakettu的答案至少部分正确,但我还必须在我的垫片中指定jQuery作为依赖,以确保在jQuery-UI之前加载jQuery。

e.g。

require.config({
    baseUrl: 'scripts/modules',
    paths:{
        jquery:'../libs/jquery',
        jqueryUI:"../libs/jquery-ui",
        underscore:'../libs/underscore',
        backbone:'../libs/backbone'
    },
    shim: {
        jqueryUI: {
            deps: ['jquery']
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        waitSeconds: 15
    }
});

答案 1 :(得分:3)

相当老的帖子。有一个tool可用于将jquery ui文件转换为由jrburke创建的AMD版本。希望它会有用!

答案 2 :(得分:2)

您可以在主文件中包含仅修补其他对象(如jQuery UI)的所有文件,如下所示(您需要确保在jQuery UI之前加载jQuery):

require(['jquery', 'app', 'jqueryui'], function ($, App) { App.start(); });

另一种方法是在您已经提到的每个模块中包含jQuery UI。

我个人更喜欢第一种方法,即使它隐藏了依赖关系。

答案 3 :(得分:0)

其他答案现在有点过时了。 JQuery UI附带AMD支持。如果您希望整个项目只使用bower install jquery-ui,然后将其添加到路径。不需要垫片。

如果你想在你的应用程序中加载你需要的jQuery UI子集(同时不加载额外的膨胀),那么只需使用bower install jquery-ui来获取整个东西,然后使用名为r.js的RequireJS构建工具来创建一个完全包含所需文件的AMD软件包。