2013-02-15 2 views
2

twitter-bootstrap을 별도의 모듈에 넣기 위해 require.js-scipt를 구현했습니다. 그러나 모달 대화 상자를 열 것입니다 단추가 포함 된 페이지로 가정 된대로 작동하는지 테스트 할 때 아무 일도 일어나지 않습니다. 나는 CSS 모듈을 필수 모듈과 함께 붙이기 위해 더 많은 것을해야한다고 생각한다. 그러나 나는 변화해야 할 곳을 찾지 못합니다. 모듈은 "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" /> 

내가 누락 된 아이디어가 있습니까?

+0

나는 당신의 경로가 최대한 멀리 볼 수있는 차이를하지 않습니다 –

+0

@LukeVella, []에 둘러싸여하기위한 것입니다 생각하지 않습니다. – Roland

+0

비슷한 문제가 발생합니다. 부트 스트랩을 요구 모듈로 로딩 할 때, 나의 데이터 속성은 전혀 파싱되지 않습니다. – rochal

답변

0

이 줄에는 data-parent="example"이 필요하다고 생각합니다.

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

하지만 100 % 아니에요. 우리는 그걸로 놀 수 있도록 jsfiddle을 만들어야합니다.

2

심이 잘못되었습니다. jQuery 자체에 대해서도 shim을 사용해서는 안됩니까? 또는 Require.js와 함께 작동하도록 제작 된 버전을 사용하고 있습니까?

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