Require.js

by lddubeau

HTML

<script src="https://rawgithub.com/rniemeyer/knockout-amd-helpers/master/ext/require/require.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">
  toggle collapse
</button>

<div id="demo" class="collapse in"><h1>i am a collapsable box!<h1></div>

CSS

#demo {
    height: auto;
    width: 200px;
    background: lightblue
}

JavaScript

require.config({
    paths: {
        "jquery": "http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery",
        "bootstrap": "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap",
    },
    shim: {
        'bootstrap' : { deps: ['jquery'] }
    }
});

(function () {
    define("jquery-fake", [], function () { 
        console.log("jquery-fake"); 
        // Just return the already loaded jQuery.
        return $; 
    });

    define("bootstrap-fake", ["jquery"], function () { 
        console.log("bootstrap-fake");
        // Nothing to be done here.
    });

    var map = {};

    if ($)
        map.jquery = "jquery-fake";

    if ($.fn.popover)
        map.bootstrap = "bootstrap-fake";

    require.config({ map: { "*": map } });
})();

//comment out the line below, and the collapse will work correctly
require(["jquery", "bootstrap"]);