CODEWITHSUNDEEP
requirejs
Maximiliano Carvalho
Maximiliano Carvalho

Reputation: 21

require js beginner - dependency injection

I'm a beginner with require js and I have a doubt here.

My files are structured like below:

root
|____assets
|____bootstrap-3.0.1
|________dist
|____________js
|____________bootstrap.min.js
|________js
|________angulajs.min.js
|________app.js
|________jquery.min.js
|________underscorejs-min.js
|____________app
|________________main.js

My app.js file is like below:

requirejs.config({
    "baseUrl": "assets/js",
    "paths": {
        ": "app",
        "jquery": "jquery.min",
        "jquery-migrate": "jquery-migrate.min",
        "twitter-bootstrap": "../bootstrap-3.1.0/dist/js/bootstrap.min",
        "underscore": "underscore-min"
    },
    "shim": {
        "twitter-bootstrap": {
            deps: [ "jquery" ]
        }
    }
});

requirejs(["app/main"]);

My main.js is like below:

define([ "jquery", "twitter-bootstrap" ], function($) {
    $(function() {
        $("#teste").tooltip();
    });
});

My question is about the main file and the dependency jquery in the case of bootstrap. If I had declare that the Bootstrap depends on jQuery I still have to include "jquery" in define function? I tried to remove "jquery" declaration but the dependency was not injected and I received a undefined error.

Thanks for any help!

Upvotes: 0

Views: 123

Answers (1)

Louis
Louis

Reputation: 151380

Doing it like this is really the way to go:

define([ "jquery", "twitter-bootstrap" ], function($) {
    $(function() {
        $("#teste").tooltip();
    });
});

In the code above, it is clear that $ should be bound to the jquery module. If you do this:

define(["twitter-bootstrap" ], function($) {
    $(function() {
        $("#teste").tooltip();
    });
});

You are binding $ to the twitter-bootstrap module. This won't work without further configuration because twitter-bootstrap exports nothing. (It installs itself as a jQuery plugin.) You could work around it by setting your shim like this:

"shim": {
     "twitter-bootstrap": {
         deps: [ "jquery" ],
         exports: '$.fn.tooltip',
         init: function ($) { return $; }
     }
 }

However, I don't recommend this since someone who comes across the code without knowing the context (that is, not knowing the relationship between the jquery and twitter-bootstrap modules) won't readily know what is going on.

In the shim above the exports field is not absolutely necessary but it help RequireJS know when Bootstrap has been loaded. It should be a symbol that does not exist prior to Bootstrap being loaded but exists after it is loaded.

Upvotes: 1

Related Questions