Knockout.js mapping plugin with require.js

Question

What is the standard way of loading mapping plugin in require.js ?

Below is my config.js (require.js config file)

require.config({
    // Initialize the application with the main application file.
    deps: ["app"],

    paths:{
        // JavaScript folders.
        libs: "lib",
        plugins: "lib/plugin",
        templates: "../templates",

        // Libraries.
        jquery: "lib/jquery-1.7.2.min",
        underscore: "lib/lodash",
        text: 'text',
        order: 'order',
        knockout: "lib/knockout",
        knockoutmapping: "lib/plugin/knockout-mapping"

    },

    shim:{
        underscore:{
            exports: '_'
        },

        knockout:{
            deps: ["jquery"],
            exports: "knockout"
        }
    }
}

In my view model

define(['knockout', 'knockoutmapping'], function(ko, mapping) {
}

However, mapping is not bound to ko.mapping. Any pointers/suggestions would be appreciated.

Thanks, Ravi

Answer 1

On a side note, because you are using Lo-Dash you don't need to include "underscore" in the RequireJS "shim" options. Lo-Dash has AMD support baked in.

Answer 2

When used with AMD, the mapping plugin exports its functionality into a separate object. So, the functionality will be attached to your mapping variable and you would call methods off of it (like mapping.fromJS).

You could choose to set ko.mapping equal to mapping in your code, if you have code that relies on ko.mapping that you are unable to change.

Answer 3

Your configuration object can specify a set of dependencies and a callback where further dependency configuration/manipulation can be performed:

var require = {
  paths: {
    'knockout': '...',
    'mapping': '...'
  },

  // configuration dependencies

  deps: ['knockout', 'mapping'],

  // configuration callback

  callback: function (ko, mapping) {
    ko.mapping = mapping;
  }
};

And when you include your scripts in markup, config should be loaded before require:

<script src="/scripts/config.js" />
<script src="/scripts/require.js" />

Now, Knockout.js will be available with a ko.mapping property as desired when used in a module definition.

define(['knockout'], function (ko) {
  // ko.mapping is available
});

Please note that this is an abbreviated configuration example. There's some shimming needed for the mapping plugin to specify the proper exports, just don't remember off the top of my head what it is.