Require.js и twitter-bootstrap

Я внедрил require.js-scipt, чтобы поместить twitter-bootstrap в отдельный модуль. Но когда я тестирую, если он работает так, как предполагалось, со страницей, содержащей кнопку, которая должна открыть модальный диалог, ничего не происходит. Я предполагаю, что я должен сделать что-то еще для склеивания css-компонентов с помощью модуля require. Но я не могу найти, где я должен измениться. Модуль печатает сообщение «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, который реализует модальный диалог и скрипт-тег модуля.

<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

Я не думаю, что ваши пути предназначены быть окруженным [] –

@LukeVella, что не имеет никакого значения, насколько я могу видеть. – Roland

У меня такая же проблема. При загрузке бутстрапа в качестве модуля требуется, чтобы мои атрибуты данных вообще не разбирались. – rochal

Я думаю, вам нужно 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

ответ

Смежные вопросы