/ / Require.js e twitter-bootstrap - javascript, twitter-bootstrap, requirejs

Require.js e twitter-bootstrap - javascript, twitter-bootstrap, requirejs

Eu implementei um require.js-scipt para colocar o twitter-bootstrap em um módulo separado. Mas quando eu testo se funciona como suposto com uma página contendo um botão que deve abrir um diálogo modal nada acontece. Eu estou supondo que eu devo fazer algo mais para unir os componentes css com o módulo require. Mas eu não acho onde eu tenho que mudar. O módulo imprime a mensagem "Loaded .." - para o console, assim parece funcionar até agora.

Meu módulo:

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 que implementa o diálogo modal e script-tag para o módulo.

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

Você tem alguma idéia do que eu estou perdendo?

Respostas:

2 para resposta № 1

Seu calço está errado. E você também não deve ter um shim para o jQuery em si? Ou você está usando uma versão criada para funcionar com o Require.js?

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

0 para resposta № 2

eu acho que você precisa data-parent="example" nesta linha.

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

Mas eu não sou 100%. Você deve fazer um jsfiddle para que possamos brincar com ele.