Intercepting dependency with RequireJS

custom.map.js

define({
    map:{
       '*': { 'nav': 'custom/header/nav.custom' }
    }
});

main.js

require.config({
  paths: {
    baseUrl: '/js',
    jquery:   'vendor/jquery/jquery-1.9.1.min', // Had to give up the CDN one because of IE8 stupidity
    jqueryNoconflict:  'vendor/jquery/jquery.noconflict',
    'jquery.available': 'vendor/jquery/jquery.available.min',
    underscore: 'vendor/underscore/underscore-min',
    backbone: 'vendor/backbone/backbone-min',
    bootstrap: //'//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min',
      ['vendor/bootstrap/bootstrap-3RC1'],
//      ['vendor/bootstrap/bootstrap-3-stable/js/bootstrap.min'],
    modernizr: 'vendor/modernizr/modernizr-2.6.2.min',

    spinjs: 'vendor/spinjs/spin.min',

    // Require.js plugins
    text: 'vendor/require/text',
    templates: '../templates',
    nav: 'views/header/nav'
  },

  shim: {
    'bootstrap': {
      deps: ['jquery'],
      exports: 'window.jQuery'
    },

    'jquery.available': {
      deps: ['jquery'],
      exports: 'jQuery.fn.available'
    }
  },

  map: {
    'jqueryNoconflict': { 'jquery': 'jquery' },
    '*': { 'jquery': 'jqueryNoconflict' }
  },

  deps: ['jquery', 'underscore', 'bootstrap', 'backbone']
});

/**
 * The entry point of the application. The AppView is instantiated and, once
 * the initialization is complete (i.e. the AmiController is loaded), the view
 * is rendered.
 */
require([
  'views/app',
  'router',
  'vm'
], function(AppView, Router, Vm){
  var appView = Vm.create({}, 'AppView', AppView);
  
  /**
   * This block loads the dependency mapping for the customizations.
   * The custom.map.js file contains a JSON object that redefines the paths of
   * some dependencies. This allows us to introduce per-client customizations
   *
   * @see http://my.amisw.com/wiki/index.php/MIPortal:les_personnalisations
   */
  try{
    require(['custom/custom.map'], function(customMap){
      console.log(customMap);
      if (customMap)
        require.config(customMap);
    });
  } catch (e) {
    console.log('No custom map found');
  }

  appView.vent.on('controllerReady', function() {
    appView.render();
    Router.initialize({appView: appView});
  });

});

nav.custom.html

<div class="brand-container">
	<a class="brand" href="#"></a>
	<div class="brand-arrow">
		<svg style="height:100%; width:32px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<defs>
				<pattern xmlns="http://www.w3.org/2000/svg" id="brand-arrow"
					patternUnits="userSpaceOnUse" width="30" height="60">
				</pattern>
			</defs>

			<polygon points="0,0 0,60 30,30 0,0"
				fill="#FFF"
				stroke="#FFF"
				stroke-width="0"/>

			<!-- Dark line -->
			<line class="arrow-dark"
				x1="0" y1="60" x2="30" y2="30"
				stroke-width="1"
			/>
			<line class="arrow-dark"
				x1="30" y1="30" x2="0" y2="0"
				stroke-width="1"
			/>

			<!-- Light line -->
			<line class="arrow-light"
				x1="1" y1="60" x2="31" y2="30"
				stroke-width="1"
			 />
			<line class="arrow-light"
				x1="31" y1="30" x2="1" y2="0"
				stroke-width="1"
			/>
		</svg>
	</div>
</div>
<div class="navbar-inner">
	<div class="breadcrumbs-container v-center-content <% if (section) print('open') %>">
		<div class="breadcrumb"> <% if (section) print(section) %> </div>
		<div class="breadcrumbs-arrow">
			<svg style="height:100%; width:32px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
				<defs>
					<pattern xmlns="http://www.w3.org/2000/svg" id="brand-arrow"
						patternUnits="userSpaceOnUse" width="30" height="60">
					</pattern>
				</defs>

				<!-- Dark line -->
				<line class="arrow-dark"
					x1="0" y1="60" x2="30" y2="30"
					stroke-width="1"
				/>
				<line class="arrow-dark"
					x1="30" y1="30" x2="0" y2="0"
					stroke-width="1"
				/>

				<!-- Light line -->
				<line class="arrow-light"
					x1="1" y1="60" x2="31" y2="30"
					stroke-width="1"
				 />
				<line class="arrow-light"
					x1="31" y1="30" x2="1" y2="0"
					stroke-width="1"
				/>
			</svg>
		</div>
	</div>
	<div class="user-container v-center-content">
		<div class="v-separator"></div>
		<a class="user" ><%=userName %></a>
		<img class="logout"  src="/ami/img/logout.png" alt="<%=userName %>">
		<img class="user-avatar" src="images/username.png" alt="<%=userName %>">
	</div>

	<% if (userCanAdmin) { %>
	<div class="nav-btn-grp v-center-content">
		<div class="v-separator"></div>

		<div class="btn-group">
			<button type="button" class="btn nav-btn dropdown-toggle" data-toggle="dropdown">
			    Menu <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a target="_blank" href="<%=http_path %>?mod=space&section=publish">Publish Dashboards</a></li><li class="divider"></li>
				<li><a target="_blank" href="<%=http_path %>?mod=space">Edit Dashboards</a></li><li class="divider"></li>
				<li><a target="_blank" href="<%=http_path %>?mod=users&pos=both">Manage Users</a></li><li class="divider"></li>
				<li><a target="_blank" href="<%=http_path %>?mod=sources&action=getPreferences&includeJS=1&returnJSON=1">Tools</a></li>
				<li class="divider"></li>
				<li><a target="_blank" href="js/custom/help.html">Need some help?</a></li>
			</ul>
		</div>
	</div>
	<% } %>
</div> <!-- /.navbar-inner -->

nav.custom.js

define([
	'views/header/nav',
	'text!./nav.custom.html'
], function(BaseNav, customTemplate){
	var CustomNav = BaseNav.extend({
		template: customTemplate
	});

	return CustomNav;
});

nav.html

<div class="brand-container">
	<a class="brand" href="#"></a>
	<div class="brand-arrow">
		<svg style="height:100%; width:32px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<defs>
				<pattern xmlns="http://www.w3.org/2000/svg" id="brand-arrow"
					patternUnits="userSpaceOnUse" width="30" height="60">
				</pattern>
			</defs>

			<polygon points="0,0 0,60 30,30 0,0"
				fill="#FFF"
				stroke="#FFF"
				stroke-width="0"/>

			<!-- Dark line -->
			<line class="arrow-dark"
				x1="0" y1="60" x2="30" y2="30"
				stroke-width="1"
			/>
			<line class="arrow-dark"
				x1="30" y1="30" x2="0" y2="0"
				stroke-width="1"
			/>

			<!-- Light line -->
			<line class="arrow-light"
				x1="1" y1="60" x2="31" y2="30"
				stroke-width="1"
			 />
			<line class="arrow-light"
				x1="31" y1="30" x2="1" y2="0"
				stroke-width="1"
			/>
		</svg>
	</div>
</div>
<div class="navbar-inner">
	<div class="breadcrumbs-container v-center-content <% if (section) print('open') %>">
		<div class="breadcrumb"> <% if (section) print(section) %> </div>
		<div class="breadcrumbs-arrow">
			<svg style="height:100%; width:32px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
				<defs>
					<pattern xmlns="http://www.w3.org/2000/svg" id="brand-arrow"
						patternUnits="userSpaceOnUse" width="30" height="60">
					</pattern>
				</defs>

				<!-- Dark line -->
				<line class="arrow-dark"
					x1="0" y1="60" x2="30" y2="30"
					stroke-width="1"
				/>
				<line class="arrow-dark"
					x1="30" y1="30" x2="0" y2="0"
					stroke-width="1"
				/>

				<!-- Light line -->
				<line class="arrow-light"
					x1="1" y1="60" x2="31" y2="30"
					stroke-width="1"
				 />
				<line class="arrow-light"
					x1="31" y1="30" x2="1" y2="0"
					stroke-width="1"
				/>
			</svg>
		</div>
	</div>
	<div class="user-container v-center-content">
		<div class="v-separator"></div>
		<a class="user" ><%=userName %></a>
		<img class="logout"  src="/ami/img/logout.png" alt="<%=userName %>">
		<img class="user-avatar" src="images/username.png" alt="<%=userName %>">
	</div>

	<% if (userCanAdmin) { %>
	<div class="nav-btn-grp v-center-content">
		<div class="v-separator"></div>

		<div class="btn-group">
			<button type="button" class="btn nav-btn dropdown-toggle" data-toggle="dropdown">
			    Menu <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a target="_blank" href="<%=http_path %>?mod=space&section=publish">Publish Dashboards</a></li><li class="divider"></li>
				<li><a target="_blank" href="<%=http_path %>?mod=space">Edit Dashboards</a></li><li class="divider"></li>
				<li><a target="_blank" href="<%=http_path %>?mod=users&pos=both">Manage Users</a></li><li class="divider"></li>
				<li><a target="_blank" href="<%=http_path %>?mod=sources&action=getPreferences&includeJS=1&returnJSON=1">Tools</a></li>
			</ul>
		</div>
	</div>
	<% } %>
</div> <!-- /.navbar-inner -->

nav.js

define([
	'jquery',
	'jquery.available',
	'underscore',
	'backbone',
	'events',
	'text!templates/header/nav.html'
], function($j, $a, _, Backbone, Events, navTemplate){

	var NavView = Backbone.View.extend({
		tagName: 'div', 
		className: 'navbar',
		vent: null,
		haveToInitBc: true,
		user: null,
		userCanAdmin: null,
		anchors :{
			user: ".user",
			logout :".logout"
		},
		http_path: '/ami/',
		template: navTemplate,

		initialize: function( options ) {
			this.vent = options.eventAggregator;
			this.user = options.user;
			this.userCanAdmin = options.userCanAdmin;
			this.http_path = options.http_path;
		},

		render: function () {
			var that = this;
			var currentSection = this.getCurrentSection();

			var userName = this.user["_name"];
			if(!userName)
				userName = this.user["_login"];

			var compiledTemplate = _.template(this.template, {
				section: currentSection,
				userName: userName,
				userCanAdmin: that.userCanAdmin,
				http_path : that.http_path
			});
			this.$el.html(compiledTemplate);
			this.$(this.anchors.user).click(function(){
				Ami.showPreferences();
			});

			this.$(this.anchors.logout).click(function(){
				//this one do not bypass the hash ("#")
				//Backbone.history.navigate('/?action=doLogout', {trigger:true,replace:true});  
				//this one doesn't work too
				//Ami.logout();
				// so let's do it, this poor way :
				document.location.assign(document.location.origin + document.location.pathname + '?action=doLogout');
                        });


			return this;
		},

		getCurrentSection: function() {
			var that = this;
			var h = window.location.hash;

			if ( h != '' && h.indexOf('section') != -1 ) {
				var section = h.match(/section\/(.*)/);

				if ( section.length == 2 ){
					var sectionName = section[1];
					return section[1].toUpperCase().replace('_', ' ');
					return;
				}
			}

			return false;
		},

		updateBreadcrumbs: function( sectionName ) {
			if ( sectionName == false ) {
				this.$el.find('.breadcrumbs-container').removeClass('open');
				this.$el.find('.breadcrumb').html('');
			} else {
				this.$el.find('.breadcrumb').html( sectionName.toUpperCase() );
				this.$el.find('.breadcrumbs-container').addClass('open');
			}
		}
	});

	return NavView;
});