Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
66 lines (48 sloc) 2.36 KB

Menu Example With RequireJS

This example shows you how to use the library with RequireJS. It buils on top of the Menu Example by just adding the necesary code to use RequireJS.

It is recommended that you read the Menu Example first.

File Structure

This are the files needed to make this example. The bolded links highlight the difference between the second and third example.

The file require.js is the actual library downloaded from the site. We moved the client side logic out of the layout.ect, and into example3-requirejs.js, with the proper configuration.

What's different?

In the layout we've removed the client side logic of the button, but still need to export the routes, so we've changed the initial <script> tag with this:

<script type="text/javascript">
// Export the routes as a global variable.
var exported_routes = <%- JSON.stringify(@routes.exportRoutes()) %>;
</script>

The exported_routes is a map of the routes, remember that each route is an Object Literal. We may add the option to fetch the routes from an AJAX call later.

At the bottom we include RequireJS, indicating that it should open example3-requirejs.js on load.

<script data-main="js/example3-requirejs" src="js/require.js"></script>

That main file contains the RequireJS configuration and the logic to greet somebody in the client side.

require.config({
    baseUrl: "/js",
    paths: {
        RouteManager: 'routeManager.min',
  }
});

require(["RouteManager"], function(RouteManager) {
    var routes = new RouteManager(exported_routes);
    // the same logic of the second example
    // ...
});

It's very important that you use RouteManager as the library name because it was named like that when constructing it using UMD.

And thats it.

Tadam!

Something went wrong with that request. Please try again.