Calling methods in RequireJs modules from HTML elements such as onclick handlers

I'm changing a project from an "old" browser-style module structure to a "new" browser-or-server-side-javascript module structure with require.js.

On the client I'm using an offsite hosted jQuery, so I started from the example they give in the "use priority config" technique of the README:

<title>My Page</title>
<script src="scripts/require.js"></script>
<script>
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' ]);
</script>

This is actually working all right. But I'd like to export functionality from main to the HTML webpage itself. For instance:

<a class="button" href="#" onclick="MyApi.foo();">
    <img src="foo.png" alt="foo" />Click for: <b>Foo!</b>
</a>

Before fitting into the AMD module pattern, I'd exposed functionality from my various files by creating a dictionary object in the global space:

// main.js

var MyApi = {};

jQuery(document).ready(function($) {
    // ...unexported code goes here...

    // export function via MyApi
    MyApi.foo = function() {
        alert("Foo!");
    };
});

But I don't know what the right approach in require.js is. Is it okay to put in the HTML more require statements inside of <script> 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 $('#foobutton').click(...)?