Twitter Bootstrap js文件已加载，但无法与requirejs一起使用 [英] Twitter Bootstrap js file loaded but not working alongside requirejs

问题描述

我有一个使用Twitter Bootstrap的Laravel应用. 一切工作正常，然后我实现了Aloha WYSIWYG编辑器- http://www.aloha-editor.org/使用RequireJS.

我按以下顺序加载JS文件:

1. jQuery
2. BootstrapJS文件
3. RequireJS
4. AlohaJS

按此顺序，Aloha可以正常运行，但$().modal函数无法正常工作(TypeError不是函数...)我可以看到，bootstrap.min.js却已加载到Firebug中.

如果我删除RequireJS，则引导程序功能正常.

我看过doco，但我不明白为什么即使文件已正确加载，我的Bootstrap函数也无法正常工作?我是否必须在RequireJS中加载它?

在RequireJS doco中，您应该像这样加载RequireJS:<script data-main="/assets/main" src="/assets/lib/require.js"></script>，但是Aloha告诉我们实现的方式没有任何data-main属性，因此要加载模块的main.js文件在哪里? ?

谢谢

解决方案

使用以下代码重试:

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 {};
});

查看更多使用Require.js从CDN加载Bootstrap

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

解决方案

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

这篇关于Twitter Bootstrap js文件已加载，但无法与requirejs一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！