title: Durandal: Making a module of custom Knockout bindings
body: <p>I want to move all of the custom bindings that I create with composition.addBindingHandler out to a module, to keep my <code>main.js</code> method clean. I moved them to a file <code>lib/binding/binding.js</code> as shown below, created an alias <code>binding</code> for the file in <code>requirejs.config()</code>, and replaced the calls with a call to <code>require('binding')</code>. However, this code throws the error <code>Module name "binding" has not been loaded yet for context: _. Use require([])</code>. How do I change this code to work properly?</p>
  
  <p><strong>app.start() call</strong></p>
  
  <pre><code>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();
  
      require('binding'); 
      //PRIOR: var composition = require('durandal/composition');
      //PRIOR: composition.addBindingHandler() calls that now live in lib/binding/binding.js.
  
      $.when(config.init()).then(function () {
          //Show the app by setting the root view model for our application with a transition.
          app.setRoot('viewmodels/shell'); 
      })
  
  });
  </code></pre>
  
  <p><strong>lib/binding/binding.js</strong> (probably doesn't matter but is included for completeness)</p>
  
  <pre><code>; (function (define) {
      define(['durandal/composition', 'knockout', 'datepicker'], function (composition, ko, datepicker) {
  
          // The following code originally resided in main.js after this declaration:
          // var composition = require('durandal/composition');
  
          // hidden: Inverse of 'visible'.
          composition.addBindingHandler('hidden', {
              update: function (element, valueAccessor) {
                  var value = ko.utils.unwrapObservable(valueAccessor());
                  ko.bindingHandlers.visible.update(element, function () { return !value; });
              }
          });
  
          // datepicker: Reusable form element with date picker.
          composition.addBindingHandler('datepicker', {
              init: function (element, valueAccessor) {
                  var input = $("&lt;input type=\"text\" class=\"form-control datepicker\" placeholder=\"MM/DD/YYYY\" /&gt;");
                  var span = $("&lt;span class=\"input-group-addon\"&gt;&lt;i class=\"fa fa-calendar\"&gt;&lt;/i&gt;&lt;/span&gt;");
                  input.datepicker();
                  input.appendTo(element);
                  span.appendTo(element);
              }
          });
  
      });
  })();
  </code></pre>