function Module () {
return {
someStuff: { ... }
};
}
|+ App
|- app.js
|- controllers.js
|- models.js
|- views.js
|- index.html
var UserModel = require('Models/User');
var UserView = require('Views/User');
Which results in this file structure
|+ App
|+ Models
|- User.js
|+ Views
|- User.js
var UserModel = require('User/Model');
var UserView = require('User/View');
Which results in this file structure
|+ App
|+ User
|- Model.js
|- View.js
var UserModel = require('UserModel');
var UserView = require('UserView');
Which results in this file structure
|+ App
|- UserModel.js
|- UserView.js
require(['util/A'], function (A) {
A.hi = 5;
});
// The same instance
require(['util/A'], function (A) {
A.hi === 5 // true
});
// Or create new instances if you want!
There was an error in /util/A.js on line 65.
There was an error in /built-app.js on line 19823.
define('some/module', function () {
...
});
define(/* just_use_the_filename, */ function () {
...
});
({
"paths" : {
"underscore" : "lodash"
}
})
require(['underscore'], function (_) {
_.isLodash === true
});
({
"paths" : {
"template" : "../../static/template"
}
})
require(['../../static/template/base'], ...);
// vs.
require(['template/base'], ...);
|+ App
|- jquery.js
|+ jquery
|- ui.js
|+ ui
|- draggable.js
require(['jquery'], ...);
require(['jquery/ui'], ...);
require(['jquery/ui/draggable'], ...);
...
</div>
<script type="text/tmpl" id="someTmpl">
{{data}}
</script>
<script type="text/tmpl" id="someTmpl2">
{{data}} 2
</script>
</body>
// Ajax'd during development,
// Built as a string in production.
require(['text!tmpl/one'], function (tmplTxt) {
// compile and register template here.
});
var x = require('x');
var y = require('y');
var z = require('z');
// vs.
require(['x', 'y', 'z'], function (x,y,z) {
});
write: function (pluginName, name, write) { ... },
load: function (name, parentRequire, load, config) {
// Require the intended dependency
parentRequire([name], function (val) {
// Add extra functionality
val.extra = function () { alert('extra!'); };
// resolve the dependency manually
load(val);
});
}
require(['plugin!module'], function (module) {
module.extra(); // alerts 'extra!'
});
define('view/main', [
'backbone', 'handlebars', 'text!tmpl/one', 'h/myHelper'
], function (Backbone, Handlebars, oneTxt, myHelper) {
Handlebars.registerHelper('myHelper', myHelper);
return Backbone.view.extend({
initialize : function () {
this.template = Handlebars.compile(oneTxt);
}
});
});
define([
'backbone', 'handlebars', 'text!tmpl/one', 'h/myHelper'
], function (Backbone, Handlebars, oneTxt, myHelper) {
Handlebars.registerHelper('myHelper', myHelper);
return Backbone.view.extend({
initialize : function () {
this.template = Handlebars.compile(oneTxt);
}
});
});
define([
'handlebars', 'text!tmpl/one', 'h/myHelper'
], function (Handlebars, oneTxt, myHelper) {
Handlebars.registerHelper('myHelper', myHelper);
return {
initialize : function () {
this.template = Handlebars.compile(oneTxt);
}
};
});
// use via: require('view!main');
// the view! plugin could automatically start in the
// `view` folder for you
The *view!* plugin would simply return the module wrapped as a Backbone.extended object
define(['handlebars', 'hbs!tmpl/one', 'h/myHelper'],
function (Handlebars, one, myHelper) {
Handlebars.registerHelper('myHelper', myHelper);
return {
initialize : function () {
this.template = one;
}
};
});
define(['hbs!tmpl/one'], function (one) {
return {
initialize : function () {
this.template = one;
}
};
});
define({
initialize : function () {}
});
define({});
require(['handlebars', 'text!tmpl'],
function (Handlebars, tmpl) {
alert( Handlebars.compile( tmpl )({ data: 1 }) );
});
load: function (name, parentRequire, load, config) {
load.asText('hbs!'+name,
'define(["handlebars"], function (H){ '+
'return H.template(H.precompile(' + tmplTxt +
')); })');
parentRequire(['hbs!'+name], function (val) {
load(val);
});
}
if (has('val') ) {
doSomething();
}
// changes to
if (false) {
doSomething();
}
require(['profile!module'], function (mod) {
// mod is different depending on the profile setting.
});