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

Quiteria

Answer 1

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.

Genethlialogy

How would I map so that I can continue to use ko.mapping? ty – Cheltenham

you could attach the mapping object to the ko object, if need be. – Genethlialogy

just use koMapping as an alias and lose a dot :) – Herwick

Answer 2

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.

Anuran

I'm running into a race condition where require([.. is getting called before the callback runs. I really like how the callback sets up ko.mapping, but it doesn't work for me all of the time – Bascomb

Answer 3

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.

Pyjamas