javascript - CWSpear 的悬停下拉菜单准备好了吗(requirejs)？

Question

我试图利用 CWSpear`s plugin ，对于带有悬停的下拉菜单，使用 require.js。 但我不断收到错误:“错误:脚本错误”。 我需要做什么才能将其与 require.js 一起使用？

编辑:

为了帮助@jakee 集中问题，这是我所做的配置:

requirejs.config({
    paths: {
        "myBootstrap": _myBootstrappingPath + "js/bootstrap",
        "myControllers" : _myBootstrappingPath + "js/controllers", 

        //jquery
        "jquery": _libsPath + "jquery/1.9.1/js/jquery",
        "jquery_validate": _libsPath + "jquery/validate/1.12.0/js/jquery.validate",

        //Bootstrap related
        "twitterBootstrap": _libsPath + "bootstrap/2.3.1/",
        "select2" : _libsPath + "select2/3.3.2/select2", 

        //misc
        "underscore": _libsPath + "underscore/1.4.4/js/underscore",
        "backbone": _libsPath + "backbone/1.0.0/js/backbone",

        "backbonePageable": _libsPath + "backbone/backbone-pageable/1.2.0/js/backbone-pageable",
        "backgrid": _libsPath + "backgrid/0.2.0/backgrid",
        "backgridAssets": _libsPath + "backgrid/0.2.0/assets/js",
        "backgridExtensions": _libsPath + "backgrid/0.2.0/extensions",

        //plugins and extensions                                                  
        "plugins_datetimepicker": _pluginsPath + "/datetimePicking/bootstrap-datetimepicker",   
        "plugins_dropdownHover": _pluginsPath + "/dropdownHover/dropdownHover",
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },    
        bootstrap: {
          deps: ["jquery"],
          exports: "$.fn.popover"
        },  
        'select2': ["jquery"],
        'backgrid': {
            deps: ["jquery", "backbone"],
            exports: "Backgrid"
        },
        'backbonePageable':  {
            deps: ["jquery", "underscore", "backbone"],
            exports: "PageableCollection",
            init: function(nhonho){
                Backbone.PageableCollection = PageableCollection;
            }
        },
        plugins_datetimepicker: {
            deps: ["jquery", "bootstrap"]
        },
        plugins_dropdownHover: {
            deps: ["jquery", "bootstrap"]
        }   
    }
});

并将其用于:

(function (bs) {

    require(["jquery", 
        "twitterBootstrap", 
        "select2", 
        "plugins_datetimepicker", 
        "plugins_dropdownHover", 
        "myControllers/defaultController"], function ($) {

        var defaultCtrlr = new ticket.defaultController(bs);

        bs.onInit();
        defaultCtrlr.start(bs.options);
        bs.onReady();
    });                    


})(window.my.bootstrap);

只要我在定义中注释 "plugins_dropdownHover" 行，它就可以正常工作。如果它尝试加载该脚本，则会失败。

Answer 1

我发现您的配置可能存在一些问题:

1:您可能对路径配置和 shim 配置之间的命名感到困惑。例如，我在垫片中看到这个:

    bootstrap: {
      deps: ["jquery"],
      exports: "$.fn.popover"
    },  

但是在路径中你有这个:

    "twitterBootstrap": _libsPath + "bootstrap/2.3.1/",

它们应该匹配。我怀疑发生的情况是，当您需要 'plugins_dropdownHover' 时，它会查找 shim 依赖项 'bootstrap'，然后永远找不到加载它的路径，因为您的路径配置包含 'twitterBootstrap' 而不是 'bootstrap'

2: _libsPath + "bootstrap/2.3.1/" 看起来像文件夹的路径，而不是文件的路径。当您稍后需要 'twitterBootstrap' 并查看 Chrome 开发工具(或您使用的任何工具)的网络选项卡时，您是否看到加载了正确的 Bootstrap 文件？

如果你只是调整这个库，我认为它看起来像这样:

requirejs.config({
    paths: {
        jquery: _libsPath + "jquery/1.9.1/js/jquery",
        // note: full path to file (minus the .js)
        bootstrap: _libsPath + "bootstrap/2.3.1/bootstrap",
        plugins_dropdownHover: _pluginsPath + "/dropdownHover/dropdownHover"
    },
    shim: {
        jquery: {
            exports: ["jQuery", "$"]
        },
        bootstrap: {
          deps: ["jquery"],
          exports: "$.fn.popover"
        },
        plugins_dropdownHover: {
            // might be able to list just bootstrap here since it will follow the chain
            // and load jQuery before loading bootstrap
            deps: ["bootstrap", "jquery"]
        }
    }
});

Demo Page仅列出了三个脚本:jQuery、Bootstrap 和插件。这正是 RequireJS 使用上述 shim 配置加载它们的顺序。