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: ...
  }
})