Require js not loading module - backbone.js

Question

I have been staring at this for a while and can't seem to figure out why some AMDs aren't available after loading them as dependencies. I have a custom module called "models"; a bundle configured in my MVC project with the virtual path "/scripts/models.js". When I define it in require.config and as a dependency, it loads the file. I can see it was requested and found. No errors from require. However, when I try to reference it as the loaded dependency argument passed into my router, it's undefined (models.userModel).
Is there something I am doing wrong here? I don't see any circular dependencies and I have tried defining the models module by giving it a name. It is undefined regardless if I define it globally or request the module by path in my router.js file.
app.js. Main config. (below)
require.config({
baseUrl: "/scripts/app",
paths: {
jquery: "../jquery",
underscore: "libs/underscore",
backbone: "libs/backbone",
kendo: "libs/kendo",
models: "../models"
},
// We shim Backbone since it doesn't declare an AMD module
shim: {
underscore: {
exports: "_"
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
},
});
require([
"jquery",
"backbone",
"kendo",
"models",
"router"
], function ($, backbone, kendo, models, router) {
alert("config-start");
});
user.js. Indcluded in the models.js bundle. (below)
define({
userModel : kendo.observable({
datasource: kendo.data.DataSource({
transport: {
read: {
url: "/api/usersettings",
dataType: "json",
type: "GET"
},
update: {
url: "/api/usersettings",
dataType: "json",
type: "PUT"
}
},
schema: {
model: {
id: "UserId"
}
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
return options;
}
}),
save: function () {
this.data.sync();
},
})
});
router.js file (below)
define(["jquery",
"backbone",
"models"
], function ($, backbone, models) {
/**
* The Router class contains all the routes within the application -
* i.e. URLs and the actions that will be taken as a result.
*
* #type {Router}
*/
var Router = Backbone.Router.extend({
contentArea: $("#MainContent"),
routes: {
"user/usersettings/contact": "contact",
"user/usersettings/security": "security",
"user/usersettings/dashboard": "dashboard",
"user/usersettings/permissions": "permissions",
"user/usersettings/colors": "colors"
},
contact: function () {
var contactTemplate = kendo.template($("#usersettings-usercontact").html());
this.contentArea.empty();
this.contentArea.html(contactTemplate);
kendo.bind(this.contentArea, models.userModel); // models is undefined
},
security: function () {
},
dashboard: function () {
},
permissions: function () {
},
colors: function () {
}
});
// Create a router instance
var router = new Router();
//Begin routing
Backbone.history.start();
return router;
});
Maybe I am missing something obvious, but I have not been able to load "models" as an external dependency. It is undefined when referencing from router.js. On the "contact" function.

Answer 1

Define needs a function that will return a value, this value then will be injected when it was required in another module.
Source code comment:
/**
* The function that handles definitions of modules. Differs from
* require() in that a string for the module should be the first argument,
* and the function to execute after dependencies are loaded should
* return a value to define the module corresponding to the first argument's
* name.
*/
define(function(){
return {
userModel: ...
}
})