node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »



Direct.js - DOM-based routing/execution script

Related Articles

Other Links

  • - NPM

How to Use

Direct.js takes advantage of HTML data-* attributes, yet is still usable with xHTML and HTML4 (and down). First thing is first; place data-controller="" and data-action="" in the <body> tag of your layout:


<body data-controller="pages" data-action="home">
<body data-controller="<?php echo $controller; ?>" data-action="<?php echo $action; ?>">
<body data-controller="<%= @controller %>" data-action="<%= @action %>">

Then, include Direct.js using either the <script> tag or, if you're using an AMD compatible script, use the require('direct'); script call:


<script src="/js/vendor/direct.js"></script>


var _ = require("direct");

Last, create your script! :-)


Direct.js uses both the _ and direct variables. You could map them to any other variables you wish. For the sake of this article, we will use the shorthand _ variable.

_(controller[, action = "common"], function|Object)

If you specify a function but not action, the action will default to 'common'. If you specify an Object, the Object can contain functions or properties.


_("utils", {
  hello: function () { alert("Hello "); },
  world: function () { alert("World!"); },
  common: function (utils) {
    // Code that goes on every page goes here 
    document.title = utils.pageTitle.replace(utils.rightTrim, '');
  rightTrim: /\s+$/
_("utils", "config", {
  fancybox: {...},
  pageTitle: "Direct.js is Awesome! "
_("pages", "home", function (utils) {

Order of Execution

  • utils.common()
  • [controller].common()
  • [controller].[action]()

When your anonymous function is executed, one argument is passed: utils. This will contain all of the "libary" code you put in _("utils", ...). The keyword this also contains a reference to utils.

Please fork and improve.