How to remap a Durandal viewmodel

Question

This is my main.js file in a Durandal project.

What I'm trying to do is set things up so that the name 'upload-item' resolves to either 'upload-item' or 'upload-item-prehtml5' depending on whether File is defined.

requirejs.config({
  paths: {
    'text': '../lib/require/text',
    'durandal': '../lib/durandal/js',
    'plugins': '../lib/durandal/js/plugins',
    'transitions': '../lib/durandal/js/transitions',
    'knockout': '../lib/knockout/knockout-2.3.0',
    'bootstrap': '../lib/bootstrap/js/bootstrap',
    'jquery': '../lib/jquery/jquery-1.9.1.min',
    'jquery-ui': '../lib/jquery-ui/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min',
    'moment': '../lib/moment/moment',
    'knockout-jqueryui': '../lib/knockout/knockout-jqueryui.min',
    'file-size-formatting': '../lib/wone/file-size-formatting'
  },
  shim: {
    'bootstrap': {
      deps: ['jquery'],
      exports: 'jQuery'
    }
  }
});

define(['durandal/system', 'durandal/app', 'durandal/viewLocator'], function (system, app, viewLocator) {
  //>>excludeStart("build", true);
  system.debug(true);
  //>>excludeEnd("build");

  var filetype = typeof(File);
  if (filetype == 'undefined') {
    //apply pre-html5 fixups
    require.config({
      map: {
        '*': {
          'upload-item': 'upload-item-prehtml5'
        }
      }
    });
  }

  app.title = 'Jumbo File Transfer';

  //specify which plugins to install and their configuration
  app.configurePlugins({
    router: true,
    dialog: true,
    widget: {
      kinds: ['expander']
    }
  });

  app.start().then(function () {
    //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
    //Look for partial views in a 'views' folder in the root.
    viewLocator.useConvention();

    //Show the app by setting the root view model for our application.
    app.setRoot('shell');
  });
});

Testing on IE8 shows that the call to require.config occurs and the mapping is added, but it doesn't seem to have the effect I expected: upload-item.js and upload-item.html are loaded when I expected upload-item-prehtml5.js and upload-item-prehtml5.html to be loaded.

If this is the wrong way to go about this, then what is the right way to perform this kind of conditional resolution?

Answer 1

It's not quite what I originally wanted, but I found you can do this:

var prehtml5 = (typeof (File) == 'undefined');

requirejs.config({
  paths: {
    ...
    'upload-item': prehtml5 ? 'upload-item-prehtml5' : 'upload-item'
  },
  shim: {
    'bootstrap': {
      deps: ['jquery'],
      exports: 'jQuery'
    }
  }
});

Path remapping seems to extend into the file name. Normally you wouldn't list siblings of main.js but you can and if you do then you can remap them, including the file name.