Require.js和twitter-bootstrap

我已經實現了一個require.js-scipt來把twitter-bootstrap放在一個單獨的模塊中。但是當我測試它是否按照假設的那樣工作時，包含一個可以打開模式對話框的按鈕，什麼也不會發生。我猜測我必須做更多的事情來將css組件和require-module粘合在一起。但我沒有找到我必須改變的地方。該模塊將「Loaded ..」 - 消息打印到控制檯，因此它似乎工作到目前爲止。Require.js和twitter-bootstrap

我的模塊：實現模式對話框和腳本標籤模塊

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 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" />

你有什麼想法我失蹤了嗎？

來源

2013-02-15 Roland

我不認爲你的路是爲了通過[] – 2013-02-15 11:15:39

@LukeVella，不作任何區別，只要我能看到包圍。 – Roland 2013-02-15 11:40:02

我遇到類似的問題。當將bootstrap加載爲require模塊時，我的數據屬性根本不被解析。 – rochal 2013-03-06 00:33:30

我覺得你需要data-parent="example"就行了。

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

但我不是100％。你應該做一個jsfiddle，以便我們可以玩。

來源

2013-04-13 04:57:51 pjmil

你的墊片是錯誤的。你不應該也有一個jQuery本身的墊片？或者您是否使用了構建用於Require.js的版本？

shim : { 
    'jquery':{ 
     exports: 'jQuery' 
    }, 
    'bootstrap-modal': { 
     deps: ['jquery'], 
     exports: 'jQuery.fn.modal' 
    } 
}

來源

2013-04-13 05:56:09

Require.js和twitter-bootstrap

回答

相關問題