2

我已经实现了一个 require.js-scipt 来将 twitter-bootstrap 放在一个单独的模块中。但是，当我测试它是否与包含应打开模式对话框的按钮的页面一样工作时，什么也没有发生。我猜我必须做更多的事情来将 css-components 与 require-module 粘合在一起。但我没有找到我必须改变的地方。该模块将“Loaded..”消息打印到控制台，因此它似乎到目前为止工作。

我的模块：

require.config({
    paths : {
        'jquery' : ['extdep/jquery-1-8-3'],
        'bootstrap-modal' : ['extdep/twitter-bootstrap/js/bootstrap-modal']
    },
    shim : {
        'bootstrap-modal' : ['jquery']
    }
});

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

实现模态对话框和脚本标签到模块的 div。

    <div class="container">
                <h2>Example of creating Modals with Twitter Bootstrap</h2>
                <div id="example" class="modal hide fade in" style="display: none;">
                    <div class="modal-header">
                        <a class="close" data-dismiss="modal">×</a>
                        <h3>This is a Modal Heading</h3>
                    </div>
                    <div class="modal-body">
                        <h4>Text in a modal</h4>
                        <p>You can add some text here.</p>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-success">Call to action</a> <a href="#"
                            class="btn" data-dismiss="modal">Close</a>
                    </div>
                </div>
                <p>
                    <a data-toggle="modal" href="#example"
                        class="btn btn-primary btn-large">Launch demo modal</a>
                </p>
            </div>

<script data-main="main" 
            src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.min.js" />

你有什么想法我想念的吗？

4

2 回答 2

2

你的垫片错了。你不应该为 jQuery 本身提供一个 shim 吗？或者您使用的是为与 Require.js 一起使用而构建的版本？

shim : {
    'jquery':{
        exports: 'jQuery'
    },
    'bootstrap-modal': {
        deps: ['jquery'],
        exports: 'jQuery.fn.modal'
    }
}
于 2013-04-13T05:56:09.567 回答
0

我认为你需要data-parent="example"在这条线上。

<a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a>

但我不是100%。您应该制作一个 jsfiddle，以便我们可以使用它。

于 2013-04-13T04:57:51.127 回答