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 offsit

Solution 1:

One benefit from using AMD is to drop the need for namespaces. Trying to create them again with RequireJS will go against the patterns AMD promotes.

With regard to using main.js, this is only really appropriate when you have a single page app and all your code be reference from one place. You're free to make additional calls to require and load other modules as you need them.

Using your example from above, you could approach it this way:

foo.js

define(['jquery'], function($) {

    // Some set up 
    // code here

    // Return module with methods
    return {
        bar: function() {

        }
    }


});

page.js

require(['foo'], function(foo) {

    // jQuery loaded by foo module so free to use it
    $('.button').on('click', function(e) {
        foo.bar();
        e.preventDefault();
    });

});

Then in your page request the page.js file with require.

Using your example above:

require({
    // config stuff here
}, [ 'page' ]);

Or loading it in the page further down:

<script>
    require(['page']);
</script>

Some additional points

• Using the pattern above, page.js could easily require many other modules to load other page related functionality.

• Where before you would attach members to your global namespace, you now split that code into separate modules that can be re-used on any page. All without reliance on a global object.

• Using require this way to attach events to your DOM elements will most likely rely on the DOM Ready module provided by RequireJS

Solution 2:

You can also set the reference on javascript's window class.

At the bottom of the application module window.MyApi = MyApi;

<a class="button" href="#" onclick="MyApi.foo();"></a>

Solution 3:

putting onclick="" inside your markup feels dirty -- mixing presentation with content. I'd recommend you add a <script> block and put the require in it, and once inside the callback, and inside another inner $(document).ready() if necessary then wire up your event handlers in the normal way: $('#node').click(...). If you can do this generically enough that it's applicable to multiple pages, then put it inside an external file that is minified, combined, and cached. But typically these things end up being page-specific, so a <script> tag at the bottom of the page is a good solution to avoid yet another external resource request.

Solution 4:

Another solution is just use code like that (of course requirejs must be added to the page):

<input type="button" onclick="(function() { require('mymodule').do_work() })()"/>