title: Calling methods in RequireJs modules from HTML elements such as onclick handlers
body: <p>I'm changing a project from an "old" browser-style module structure to a "new" browser-<strong>or</strong>-<em>server-side-javascript</em> module structure with <a href="http://requirejs.org/">require.js</a>.</p>
  
  <p>On the client I'm using an offsite hosted jQuery, so I started from the example they give in the <a href="https://github.com/jrburke/require-jquery/blob/master/README.md">"use priority config"</a> technique of the README:</p>
  
  <pre><code>&lt;title&gt;My Page&lt;/title&gt;
  &lt;script src="scripts/require.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  require({
      baseUrl: 'scripts',
      paths: {
          jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
          jqueryui: ...,
          ...
          ... // bunch more paths here
      },
      priority: ['jquery']
  }, [ 'main' ]);
  &lt;/script&gt;
  </code></pre>
  
  <p>This is actually working all right.  But I'd like to export functionality from main to the HTML webpage itself.  For instance:</p>
  
  <pre><code>&lt;a class="button" href="#" onclick="MyApi.foo();"&gt;
      &lt;img src="foo.png" alt="foo" /&gt;Click for: &lt;b&gt;Foo!&lt;/b&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Before fitting into the AMD module pattern, I'd exposed functionality from my various files by creating a dictionary object in the global space:</p>
  
  <pre><code>// main.js
  
  var MyApi = {};
  
  jQuery(document).ready(function($) {
      // ...unexported code goes here...
  
      // export function via MyApi
      MyApi.foo = function() {
          alert("Foo!");
      };
  });
  </code></pre>
  
  <p>But I don't know what the right approach in require.js is.  Is it okay to put in the HTML more <code>require</code> statements inside of <code>&lt;script&gt;</code> tags, and then name modules so that it can be used from within the webpage?  Or should this always be done dynamically inside of main.js, like <code>$('#foobutton').click(...)</code>?</p>