Twitter Bootstrap js file loaded but not working a

问题:

I have a Laravel app that uses Twitter Bootstrap. Everything was working fine and then I implemented the Aloha WYSIWYG editor - http://www.aloha-editor.org/ which uses RequireJS.

I load the JS files in the following order:

1. jQuery
2. BootstrapJS file
3. RequireJS
4. AlohaJS

In that order, Aloha will work fine but the $().modal function won't work (TypeError is not a function...) I can see that bootstrap.min.js is loaded in Firebug though.

If I remove the RequireJS the bootstrap functions work fine.

I have had a look at the doco but what I don't understand is why my Bootstrap functions don't work even though the file is being loaded properly ? Do I have to load it in RequireJS ?

In the RequireJS doco, you should load RequireJS like that: <script data-main="/assets/main" src="/assets/lib/require.js"></script> but the way Aloha tells us to implement doesn’t have any data-main attribute, so where is the main.js file where the modules are being loaded?

Thank you

回答1:

Try again with code below:

requirejs.config({
    appDir: ".",
    baseUrl: "js",
    paths: { 
        'jquery': ['//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min', 'libs/jquery-min'],
        'bootstrap': ['//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.', 'libs/bootstrap-min']
    },
    shim: {
        'bootstrap' : ['jquery']
    }
});

require(['jquery', 'bootstrap'], function($) {
    console.log("Loaded :)");    
    return {};
});

See more Loading Bootstrap from CDN with Require.js